11/15/2019

Measuring File Downloads on Wild Apricot with Google Analytics and Google Tag Manager

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.

Sample wild apricot web page with download links
Click to enlarge

 

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.

Google analytics event report for file downloads
Event Reports in GA

 

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.

Google analytics event actions for file downloads
File Types are displayed under Event Action

 

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.

The download file tag
The configured Download File GTM Tag

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).

File download map regex table
Filw Download Regular Expression (RegEx) Table Custom Variable

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

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.

Extract file from URL path custom javascript variable gtm
Custom JavaScript Variable to Extract File Name of Download

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.

Google Analytics ID in custom variable
Google Analytics ID configured as a Variable

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!

Gtm file download trigger configuration
File Download Trigger in GTM

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.

 

Realtime reports of download file events
Click on Event Category to see download details

When you click on the Download Event category you will see the various file names you have clicked on.

Event actions for download category in GA
All the files downloaded and their filenames

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.

Comments

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment