Google Analytics helps you track and report on visitor traffic to your Wild Apricot website. The free analytics system records information such as what page link and page title was loaded and how the visitor found your website. Google Analytics can also record events such as button clicks and file downloads, but this capability is not always taken advantage of because it seems difficult to setup tracking of Google Analytics events. In this article we will describe just how easy it is to setup an event that tracks all file downloads from a Wild Apricot website. For the rest of the article we will refer to Google Analytics with the acronym ‘GA‘. We will refer to the Google Tag Manager with the acronym ‘GTM‘.
Using Google Tag Manager to Track File Downloads
Tracking file downloads without the Google Tag Manager is difficult because a file download does not register a web page load. Due to this fact, Google Analytics does not record a file download as part of a session. A visitor clicks on a link to download a PDF or Word document, but Google Analytics has no idea that this event occurred. Enter the Google Tag Manager.
Google Tag Manager enables a website administrator to setup ‘tags’ which enable tracking of just about any event on a website including clicking on a file download, or clicking a Pay Online button on an event registration or even how far someone has scrolled on a page. Event tracking with Google Tag Manager is surprisingly effective to track how someone is using your website, or abandoning a particular workflow midstream.
To track file downloads we have created a sample page with 3 files in Wild Apricot. These links have been created with a content gadget.
Our Goal: Google Analytics Event to track File Downloads
This article will help you create a new set of GA Behavior reports under the Behavior>Events. The new reports will have the category “Download” and will contain the file type (PDF, Word, Graphic, Excel, PowerPoint, etc) as well as the name of the file that was clicked on.
When you click on the Event Category Download you will “drill down” to a report that describes the various file types that have been downloaded, listed under the Event Action column.
Setting Up the GTM Tag “Download Files”
There are 6 main steps in setting up the Google Tag Manager tag required to track file downloads. Of course you can modify this tag to suit, but we recommend you get this tag working before you start making any changes to it. We are assuming you have successfully configured Google Analytics in Wild Apricot as well as added added the necessary Google Tag Manager scripts to Wild Apricot. You must make sure GTM is configured and working properly with your website in “Preview” mode, so do that first before continuing with this tutorial.
The Download Files tag is described below with each step outlined under the image.
Step 1. Create the tag
When creating the tag Download Files, select the Track Type “Event” which will allow you to add the category, action, label and the GA settings.
Step 2. Assign a Category
For Category we are using the word “Download” although you can name it whatever you like. This will appear as the category on the GA Event reports.
Step 3. Create the Event Action
For the Event Action we have created a RegEx (regular expression) Table, a custom variable in GTM. The purpose of this custom variable is to convert the download link into a set of file type categories (eg PDF).
The RegEx Table works by converting the link of the download (stored in {{Click URL}} data layer variable) and testing to see what the URL ends with. We have 11 mappings here but you can add more if you’d like to your RegEx Table. To add another file extension just make sure you separate each extension with a pipe character (|).
Pattern |
Output |
http[*s]+pdf |
|
http[*s]+(doc|docm|docx|dot|dotm|dotx) |
Word |
http[*s]+(xls|xlsx|xlt|xltm|xltx|xlsm) |
Excel |
http[*s]+(pptx|pot|potx|ppt|pps|ppsm|ppsx|pptm) |
PowerPoint |
http[*s]+(txt|rtf) |
Text |
http[*s]+(bmp|gif|png|jpg|jpeg|tif|tiff) |
Graphic |
http[*s]+(htm|html) |
HTML Document |
http[*s]+xml |
XML Document |
http[*s]+(mp4|mpeg|wmv) |
Video |
http[*s]+mp3 |
Audio |
http[*s]+(zip|gzip|tar) |
Compressed Archive |
Step 4. Create the Event Label
The event label will store the file name of the downloaded document. In order for GTM to extract this information from the URL clicked, we create a Custom JavaScript variable. The Custom JavaScript GTM variable is a powerful mechanism to manipulate any of the click stream data (known as the data layer) passed to GTM while the visit is being tracked.
The JavaScript function is:
function() {
var filepath = {{Click Element}}.pathname.split("/");
// splits the pathname into an array of strings, using / as a delimiter
var filename = filepath.pop();
// grab the last element of the array (ie the filename)
return filename.indexOf(".") > -1?decodeURI(filename):'N/A'
// is there is a period (.) in the filename?
// if so, return a clean file name, otherwise N/A}
Step 5. Assign the Google Analytics ID
Each event tag must have a Google Analytics ID assigned to it. The ID is a string that starts with UA- in your Google Analytics installation script.
We have created a custom variable of type “Google Analytics Settings” and stored our GA ID there. This way we can reuse this ID in other tags without having to remember and retype the Google Analytics ID.
Step 6. Create the Firing Trigger for the Tag
Finally we setup the firing trigger using the “Click – Just Links” trigger type. We will fire the trigger to record the data only when the URL contains one of our file download extensions. We do not want to fire this tag on all links!
The regular expression for Click URL is
(pdf|doc|docm|docx|dot|dotm|dotx|xls|xlsx|xlt|xltm|xltx|xlsm|pptx|pot|potx
|ppt|pps|ppsm|ppsx|pptm|txt|rtf|bmp|gif|png|jpg|jpeg|tif|tiff|htm|html|
xml|mp4|mpeg|wmv|mp3)$
Again, this regex can be modified in case you wish to track other file types. This is a concatenation of all the file extensions defined in the regex table in step 4.
Step 7. Test the event with Realtime reports in GA
Once the tag has been created, you can “Preview” the GTM container on your website. You will see a GTM “Debug” screen overlaid on the bottom of your site where you can check if the tag is firing properly by clicking on one of the links to download it. Once the tag is properly being triggeredyou can see Realtime events in Google Analytics when you download a few files.
NOTE: Before testing your GTM tags, you will need to click the “Preview” button each time you make a change in GTM and reload your Wild Apricot site to make sure it picks up any changes you have made to the tag configuration.
When you click on the Download Event category you will see the various file names you have clicked on.
Step 8. Publish the GTM container
Finally, when this is working you can publish the container. Use the blue “Publish” button at the top right of the GTM window. At this point all click traffic that download files will be recorded for posterity and available for reporting just like any other type of traffic under the Behavior>Events reports.
