Search code examples
javascriptpdfacrobat

Acrobat Javascript: passing a UTM parameter from URL into a PDF button

I have a PDF that has a button with field name ctaButton.

ctaButton currently has a url pointing to https://mywebsite.com.

I want to host the PDF on my server at https://mywebsite.com/hosted.pdf.

And when I send someone a link to the PDF, I want to attach a UTM_term parameter ?utm_term=customer1 and then have the PDF read this parameter and update the ctaButton url to https://mywebsite.com/?utm_term=customer1.

I've been messing around with the Javascript actions in Acrobat for a couple of hours trying to make this happen. Any help greatly appreciated.

Solution

  • I did hours of research and came to this conclusion – Javascript in Acrobat is like trying to code in 1985 AND browsers will not execute whatever code you come up with.

    So I used this workaround:

    • When I send the PDF to someone, I send it as a link with a base64 encoded stringified JSON package that contains a bunch of tracking data but importantly, the name of the file to access as well as utm parameters specific to the recipient
    • The link hits a server handler (NodeJS) that extracts the encoded JSON package, and uses the data in the package to serve up an HTML redirect page pointing to the right PDF file
    • Importantly, the HTML page also saves the JSON package to the browser's localStorage . . . this comes in handy in subsequent steps
    • The PDF file opens in browser (it doesn't have to, could be opened on desktop) and the call to action link has a link to a get request handler
    • The get request handler serves up ANOTHER redirect page
    • This second redirect page accesses the browser's local storage, looks for the utm parameters I set for that user, and then redirects to the sale page, with nice utm parameters attached

    So to sum up, you don't add the utm parameters to the call to action link in the PDF (because that would make the world too easy to live in) and instead you do all these acrobatics (no pun intended) to attach utm parameters in the link clicks (via JSON strings saved in localStorage) during the process (i.e. when user opens email to extract file via link, and then when user clicks call to action in the PDF).

    Any questions or clarifications please let me know in the comments and I will do my best to address.

    Caveats

    • Only works if user uses same browser in all steps (i.e. if Susan opens the email in Safari, saves the PDF, then clicks the call to action in the PDF, and the link opens in Chrome, utm parameters will not be passed).
    • Assumes browser is modern and has localStorage

    UPDATE: I came across another solution. It's a bit more convoluted. Diagram below.

    enter image description here

    Porky.io is a Javascript extension for Adobe Indesign. So flow is:

    1. send Porky.io the customer data you need (e.g. utm's for links)
    2. Porky.io generates PDF from a template you provide with the customer data you provided
    3. Listen for a new file save from Porky
    4. Do something with the file (e.g. email it to customer)

    I believe you need to run an instance of Windows somewhere in the cloud (e.g. on Azure) to run Indesign with the Porky.io. Unless you want to rely on your laptop.

    My project's not big enough yet to warrant setting this up . . . but good alternative if I need to make my current solution more robust.