Utilities

Google Event Tracking

So you want to be able to track events inside of analytics (GA4) and tag manager, we have created this simple script. You will need to add a class of downloadButton and then set the attributes. data-name can be descriptive to the action data-location is where on the page did the event happen

Paste the code in your page settings custom code in the before </body> tag

The requested data is captured and stored in the window.dataLayer and can be access in GTM.

Setting up GTM

1. Create a Data Layer Variable for buttonName and buttonLocation
2. Create an associated Custom Event Trigger name "App Download Button Click" with event name "app_download"
3. Create a new GA4 event tag with the relevant parameters using the Data Layer Variable and assign the trigger created in step 2.

Refer to the Google Tag Manager documentation for detailed instructions on creating variables, triggers, and tags.
Class type
Copy
content_copy
Copied
<script>
// Select all download buttons
let downloadButtons = document.querySelectorAll('.downloadbutton');// Create trackClick event to capture name and location
function trackClick(button) {
   let name = button.getAttribute('data-name');
   let location = button.getAttribute('data-location');
   
   // Push the data to the Google Tag Manager dataLayer
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
       event: 'app_download',
       buttonName: name,
       buttonLocation: location
   });
}// Loop through downloadButtons and attach event listeners
downloadButtons.forEach(button => {
   button.addEventListener('click', () => trackClick(button));
});</script>

Hide

🙈
Class type
Display
non
See div in Navigtor

Text Wrap Pretty

🙈
Class
Wrap
pretty

DOM element

🙈
Element
Tag, Attribute, Name

Images

Some simple extended class for when using images in certain conditions.
Class type
Max-Width
Width
Height
Fit
100%
100%
100%
100%
Cover
100%
Contain