Written by: Anne Holz | IANR Media
UNLcms Google Analytics event tracking for analytics.js is built into the UNL.edu framework. The framework script tracks clicks on the following:
- File downloads (zip, exe, pdf, docx, xlsx, pptx, mp3, or mp4)
- External sites (contains the http:// prefix and is on a different domain/subdomain).
- Email addresses (has the mailto: prefix)
- Mediahub (event actions play, pause, ended) by including Mediahub event JavaScript
The number of Total Events and Unique Events can be found in a website's Google Analytics account by going to Behavior>Events>Overview and clicking on the respective Event Category (Outgoing Link, File download, Email, media).
But, what if you have a need to track image clicks on your website? Since images are uploaded to your website, not an external website, and since the file extension isn't one of the ones listed above for file downloads, they don't fall into any of the framework event tracking categories.
Of course, not every image on your site should be tracked, even if it's clickable. Reasons for tracking image clicks may include the following:
- Determining how many times an affiliate banner is clicked
- Determining how many times an image resource is downloaded
In the cases above, clicks can be tracked by placing event tracking code on the page within the link that surrounds the image.
To remain consistent with the framework code, place your tracking information in the order shown below.
onClick="ga('send', 'event', 'category', 'filename', 'page');"
How to Write Image Event Tracking Code
- In the code snippet above, do not replace 'send' and 'event'.
- Replace 'category' with a descriptive, easily recognizable name (example: Image Downloads).
onClick="ga('send', 'event', 'Image Downloads', 'filename', 'page');"
The 'category' displays in Google Analytics when you go to Behavior>Events>Overview. - Replace 'filename' with the name of the file you're tracking (example: ag-conference.jpg).
onClick="ga('send', 'event', 'Image Downloads', 'ag-conference.jpg', 'page');"
The 'filename' displays in Google Analytics when you go to Behavior>Events>Overview and click the "Event Category" name and then click the "Event Action" primary dimension.
ADVANCED:
When working in twig templates, replace 'filename' in the onClick code with the variable. Use a dot (.) to access attributes of a variable (example: {{ variable.0.attribute }}.
When using a file upload field, the variable is formed by replacing variable in variable.0.attribute with the machine name for the image field, which can be found on the content type's MANAGE FIELDS tab and replacing attribute with the name of the attribute, which can be found in the debugging output.
In the example below:
onClick="ga('send', 'event', 'Image Downloads', '{{ variable.0.attribute }}', 'page');"
becomes onClick="ga('send', 'event', 'Image Downloads', '{{ field_resource_file.0.filename }}', 'page');"
- Replace 'page' with the page URL or the page Title, whichever is most useful for identifying the clicked link (example: 'https://ianrmedia.unl.edu/resources/tracking-image-clicks-google-analytics').
onClick="ga('send', 'event', 'Image Downloads', 'ag-conference.jpg', 'https://ianrmedia.unl.edu/resources/tracking-image-clicks-google-analytics');"
The 'page' displays in Google Analytics when you go to Behavior>Events>Overview and click the "Event Category" name and then click the "Event Label" primary dimension.
ADVANCED:
When working in twig templates, replace 'page' with the page URL or title variable (example: {{ title }} or {{ node_url }}).
onClick="ga('send', 'event', 'Image Downloads', '{{ variable.0.attribute }}', '{{ title }}');" - Add the onClick code in the image link.
<a href="..." onClick="ga('send', 'event', 'Image Downloads', 'ag-conference.jpg', 'https://ianrmedia.unl.edu/resources/tracking-image-clicks-google-analytics');"><img ...></a>
ADVANCED:
<a href="..." onClick="ga('send', 'event', 'Image Downloads', '{{ variable.0.attribute }}', '{{ title }}');"><img ...></a>