Here at Chunky Duck, we're all about building robust, future-proof web solutions. That extends to how we approach website tracking. We've seen firsthand how fragile traditional tracking methods can be – relying on finicky CSS classes or hoping a "thank you" page loads consistently. That's why we champion a DataLayer-first approach, and we're sharing our method with you, developer to developer.
When you, as the website dev, push events to the DataLayer, you're giving Google Tag Manager (GTM) explicit, crystal-clear signals about what's happening on your site. This is a far more reliable and accurate way to track user interactions than trying to infer them from the DOM. It means your tracking stays solid, even when layouts change or content updates. Plus, you can pass along rich, contextual data with each event, making your analytics incredibly powerful.
<aside> <img src="/icons/code_orange.svg" alt="/icons/code_orange.svg" width="40px" />
The dataLayer itself is a global JavaScript array, initialized as window.dataLayer = window.dataLayer || [];. While conceptually treated as an object for passing key-value pairs, its core mechanism involves leveraging the array's push() method to incrementally add objects containing event data and associated variables, which GTM then processes.
</aside>
At Chunky Duck, we don't just track clicks; we track purpose. As developers, you built the page, you know its goal. Every page has a reason for existing, whether it's to generate a lead, provide information, or drive a download. Our philosophy is simple: instrument an event for the primary goal of that page.
It doesn't matter if your analytics or ads team needs it right now. If the page's objective is to have a user fill out a form, push an event when that form is successfully submitted. If the goal is for them to watch a video, push an event when the video plays or completes. By proactively baking in these goal-oriented events, you ensure that the data is always available when it's needed.
<aside> <img src="/icons/code_orange.svg" alt="/icons/code_orange.svg" width="40px" />
Once an object containing an 'event' key (e.g., {'event': 'your_custom_event'}) is pushed to the dataLayer array, GTM's listener detects this dataLayer.push(). This specific 'event' value then acts as a direct match for a Custom Event Trigger configured within the GTM interface. When the trigger condition (i.e., the event name) is met, it activates any associated GTM tags (e.g., Google Analytics event tags, Google Ads conversion tags) designated to fire on that particular custom event.
</aside>
Beyond these fundamental page goals, here are the common Call-to-Action (CTA) events that could be setup.
<aside> 💡
Be mindful to fire this event after validation and spam checks not on the submit button click.
</aside>
mailto: links, tel: links, and file downloads (e.g., PDFs, brochures) are all crucial interactions that deserve explicit events.By embracing this mindset – defining and tracking page goals, alongside specific CTAs – you're building a truly robust and future-proof tracking infrastructure, the Chunky Duck way.
The dataLayer is simply a JavaScript array, and you push information into it using the push() method. It's straightforward and incredibly effective.
Here's how we'd track a basic button click. We assign an id to the button and then listen for its click event.
JavaScript