I’m going to put together a series of training videos on Google Tag Manager (GTM). This is the first episode in the series and it covers how to Tag a Website using CSS Selectors and HTML5 Data Attributes.
These are two powerful concepts that allow Analytics professionals to tag almost any aspect of a users’ interaction with a website. CSS Selectors show you how to target just the elements on the page you need to fire tags for–and HTML5 Data Attributes give you a mechanism for moving metadata from HTML nodes to an analytics platform like Google Analytics. A thorough understanding of these concepts allows the Implementation Engineers to collect robust data on granular user interactions.
This is a comprehensive video that shows you my work flow from inspecting the HTML to testing and Debugging the Triggers and Variables. During debugging we discovered the CSS Selector was slightly different when the user clicked the link versus when being opened in a new window. These types of nuances are likely to show up during your own testing – so we left it in and showed you how to create a Trigger that would handle both scenarios.
There’s a lot of different ways to accomplish the same thing when Tagging outbound links. I prefer this method because it gives you the most control when choosing what metadata to feature in the Event Tags.