Event tagging of download pdf

Location of Files. The PDF file are stored in a folder named Files inside the project directory. URL window. Browser Compatibility. View Demo. Related Articles. Add Comments. Thank you for the feedback. Also what is the use of the delay and page path condition? Just curious :. If you click a link and then the user is redirected, GA might not have enough time to send the data if PDF is opened in the same window. If you want to give it more time to send the data, you can use Wait for tags.

This applies not only to GA tags but to all tags. Yes I saw, I think you misunderstoond me. Why would you use page path and not the 'click text'? The page path can always be found since it's recorded when the event is triggered. The click text most times has a better name to recognize what has been clicked :. Thanks for the answer.

Would you say: no harm, no foul? This is up to you. I just showed an example. If I wanted to create a goal based on a click of particular URL just on the particular page, then Page Path would be useful.

To sum up: your naming convention depends on your needs. Imagine delaying every link click for up to 2 seconds. That impacts the UX. I feel totally inadequate. Full disclosure, I'm a novice that goes to the Google school of how do I do this for all my instruction.

Great set of instructions really clear, unfortunately I just cannot get either a simple ahref link, or button link to a pdf doc download to trigger at all. Can you think why this may be the case?

Other tracking tags work ok. On my site, all my PDFs open in new windows, so I'm not seeing my tags trigger properly. Any suggestions to fix that? However,after creating the event I'm just not seeing any activity in GTM preview mode that indicates that the event I'm watching for is firing.

How i do? How do i do to track a specific page on my website or landing page? Click, scroll etc. Your email address will not be published. Save my name, email, and website in this browser for the next time I comment. Notify me when new comments are added.

Using Google Analytics 4? Track other files too! Ask for a dataLayer. The information from this header might also take precedence even if the download attribute is present. A link-based solution conforms well to HTML standards and lets the browser do most of the work. However, if you want more control over the download and would like to display some custom progress indicator you can also download files via Angular's HttpClient.

A file is best represented as a Blob in the browser:. The Blob object represents a blob, which is a file-like object of immutable, raw data -- MDN web docs.

By specifying the responseType option we can perform a GET request returning a blob representing the downloaded file. Let's assume we've got a designated DownloadService doing just that:. A component would then be able to call this service, subscribe to the corresponding observable and eventually save the file like this:. Here, we're creating an anchor tag programmatically when the blob arrives.

With URL. Finally, we click the link like the user would've done with a regular browser download link. After the file is downloaded, we'll discard the blob by revoking the object URL we created. This approach is pretty verbose though and might not work smoothly for every browser. Therefore I'd advise you to use the popular library FileSaver. The saving then becomes a one-liner:. If you don't like adding a dependency for this and would prefer to use the manual approach shown before, you might as well refactor the code for saving the blob into a separate service.

You can also create a custom injection token for URL - also see below how we'll do this for FileSaver. By setting the option observe to events while making an HTTP request, we won't just receive the final response body of the request but also get access to intermediate HTTP events. We also need to explicitly pass the option reportProgress in order to receive HttpProgressEvents.

Our HTTP request will eventually look like follows:. Is there any way i can download my pdf on my custom button click without using in built PdfDownloadLink? The text was updated successfully, but these errors were encountered:. It would be nice to be provided with a trigger that could be passed to onClick handlers. Sorry, something went wrong. Note that this will generate the pdf when the page loads. If you don't want that you'll need to mess with loading and displaying the link based on if the button is clicked.

I've accomplished this via some headaches that I'm trying to solve in Here's an example of how to do a custom onClick handler on a button to lazy load the PDF:. Feel free to tweak to your needs. I slimmed my code down quite a bit for the example here. However, in a real code base I also track when it is async loading the pdf blob to disable multiple onClick events, and cache the generated blob to speed up subsequent download clicks.

I'd imagine many other developers do not need to generate the PDF until a user clicks on their button, as I did.