coldfusionbase64coldfusion-11cfpdf

How to add javascript import in cfcontent using cfpdf as source


I used to open my pdf through the url and let the browser handle the pdf rendering, but since the last update to android and ios that way no longer works for mobile devices.

I decided to use coldfusion itself to deal with this using the cfpdf function and externalizing the binary with cfcontent, which works great, but I have a google analytics code on the page, and cfcontent renders the entire page, so I lose the reference of my analytics code.

A solution that I had temporarily call this content generated by my cfpdf through an iframe, but the base64 of some pdf did not load when the iframe was used via base64, already using as a normal url I returned to the initial problem of not working in mobile devices.

Basically I need to insert my analytics tag into the generated html of my cfcontent, but I can not manipulate the source manually, because the content comes from cfpdf

<cfhtmlhead text='
    <script async src="https://www.googletagmanager.com/gtag/js?id=#Key#"></script>
    <script> 
        window.dataLayer = window.dataLayer || []; 
        function gtag(){dataLayer.push(arguments);} 
        gtag("js", new Date());     
        gtag("config", "#Key#"); 
    </script>'>
<cfpdf action="read" name="RawFile" source="#RawUrl#" />
<cfcontent variable="#toBinary(RawFile)#" type="application/pdf" />

Solution

  • Your cfcontent outputs binary data and tells the browser to treat it as application/pdf (via Content-Type HTTP header). You cannot add HTML or JavaScript to it as it would break the PDF document. I see two options here:

    1 Use an intermediate page

    open_pdf.cfm

    <cfoutput>
    
        <h1>Please wait while we prepare the PDF document for you...</h1>
    
        <script async src="https://www.googletagmanager.com/gtag/js?id=#Key#"></script>
        <script>
    
            window.dataLayer = window.dataLayer || []; 
            function gtag(){dataLayer.push(arguments);} 
            gtag("js", new Date());     
            gtag("config", "#Key#");
    
            var secondsToWait = 4;
            setTimeout(function() { window.location.href = 'render_pdf.cfm'; }, secondsToWait * 1000);
    
        </script>
    
    </cfoutput>
    

    render_pdf.cfm

    <cfpdf action="read" name="RawFile" source="#RawUrl#" />
    <cfcontent variable="#toBinary(RawFile)#" type="application/pdf" />
    

    Your visitors click on the open_pdf.cfm, read a message about how the PDF document is being "prepared" for them while being tracked by Google Analytics. After 4 seconds (adjust to whatever you think is sufficient to track), they will be redirected to the actual PDF document.

    2 Embed Google Analytics into your PDF

    You can run JavaScript code in a PDF document. Note that this might be a bit tricky due to security restrictions in PDF viewers. And even then I strongly advise you against using this option as it will probably cause more issues than proper GA impressions.