Paul Duncan - Advanced Tracking & Enriched SERP Results via Google Tag Manager

Editor's Notes

• #3: We make the best outdoor products money can buy! –Tommy Boy With this array of experience, I have implemented tags in a variety of ways, and have found GTM to be the easiest to use, with the largest community of online contributors who make it easy to accomplish what you’re trying to tag.
• #4: What is a tag management system? This is a container that hosts offsite code snippets called “Tags” which pull data from your website to send to other sources. More recently-- Google Optimize A/B testing.
• #5: Data driven decisions are vital to the success of digital marketing campaigns. GTM allows for more data to be captured and analyzed. It also allows non-devs to implement advanced tracking, or custom code like Rich Data Markup without having to manage the source code. And because you are storing these code snippets off-site, you’re actually positively impacting your page speed and load time. This is going to be particularly important with the pending mobile-first ranking algorithm. Google has been very loud about page speed and load time, and we all know that small changes can add up and create a faster site. Best of all, it’s Free to Use!!
• #6: Before we get into some of the more advanced tracking methods and tags you can implement, It’s important to understand some of the core components of GTM.
• #7: The most important of which are Tags. So what is a tag? A tag is a piece of code that send info to a 3rd party such as GA. They can be used in a variety of ways. Tags can place tracking IDs from 3rd parties on your site. Tags can be also instrumental in tracking page views, events, social engagement, or transactions on your website. They can also be used to implement rich data markup on your website for data such as Business/Organication Contact Info, Product Info, or to markup Videos and Reviews. There are built in templates for more basic tags and many 3rd party tracking apps, or there are blank tags that will allow you to enter what ever you want.
• #8: Tags are not “always on”. They need to be fired based on a certain condition being met. This is where Triggers come in. A trigger is a condition that evaluates to either true or false. Tags will fire based on the state of that trigger that they are attached to. Some examples of triggers are page views, user clicks, a certain time limit being reached, or form submissions. So for example, you have a “call now” button on every page of your website. You’d like to see which from which page a user clicks to call. You can create a tag that will gather that URL, and use the button click as the trigger. So the tag itself will not be fired until the trigger evaluates to true, which would be the act of clicking “call now”.
• #9: Variables are another important component to GTM. These name-value pairs populate a particular value during run time of a tag or a trigger. Google provides several built-in variables, but you can also create custom variables. Variables can be used with Tags to capture changing values, or to insert particular tracking codes such as your GA tracking-ID. They can be constant or dynamic. Variables can be used within triggers to define particular trigger filters. In more advanced cases, variables can actually be dynamic within the tag itself. So you would be able to define a variable based on information from your website, and the variable would automatically change depending on the session data from each user on your website.
• #10: The DataLayer, also sometimes called the Data Collection Layer, contains information from the webpage and the user session that can be passed from your site to GTM and then through to the 3rd party sources. The built in variables within GTM make it very easy to interact with the data layer. But more advanced users can start to send specific custom data to the data layer to be captured and tracked. In this way, you can capture dynamic information that would change from session to session. In my previous position I was able to solve a rather difficult problem using information from the datalayer. Our clients had contact forms implemented on their site through the use of iframes. This made it very difficult to capture the URL from which a form was submitted. I was able to add the same GTM container to the iframe URLs in order to capture the referral URL within the dataLayer, which then allowed us to pass that information to Google Analytics and quickly analyze which pages were leading to form submissions.
• #11: One of my favorite parts of GTM is the Custom HTML Tag option. This is essentially a blank slate that allows you to enter whatever type of custom code snippet you want onto a webpage. You can add in rich data markup to enhance your rankings, or a custom downloaded tracking script. The limits here are without bounds. A word of caution about Custom HTML tags, entering custom HTML code can be as powerful as editing the source code of your website itself. So be careful about who you allow to access your GTM account.
• #12: The good news is, Google provides a way for you to test out the tags, triggers, and variables that you have implemented before actually publishing those changes. This testing environment, otherwise known as Debugging or Preview Mode, populates a window right onto your live URL. This will show you which tags have fired on the page, which tags have not yet fired, what variables are being used, and even what data is being passed through the data layer. This is highly useful for making sure that everything is working correctly before unleashing those new Custom HTML tags onto your site.
• #13: Now that we understand the different components of GTM, let’s get it implemented so that our site and the container can being to communicate. After creating a new container, you’ll be given a tracking code (shown here), that has an ID specific to your container. You’ll need to add this piece of code to every page of your site for which you’ll want to do some tagging. If you don’t have access to the source code, your developer should be able to install this code quite easily. Do ensure that if you have any sort of custom Data Layer snippet, that you place the GTM code below the Data Layer snippet so that those variables are available to be passed to GTM.
• #14: Beyond the built-in tags that Google provides, there are some very valuable advanced tags that you should be using. We’re going to talk about Rich Data Markup, Scroll depth tracking, Screen Time Tracking, and Hover Tracking.
• #15: When talking about Rich Data markup, we’ve got to take a look at Schema.org. Schema.org is a library of microdata which formats particular information on your website to be easily read and indexed by search engines. This code acts as a big signal for Google to recognize what type of information you’re trying to pass over. Personally, I like to structure my schema code snippets using JSON-LD, a type of javascript which is easy to use and create. There are a myriad of online generators that help you generate your schema code to then insert into GTM. So what all can you mark up with rich data and how does it impact your site?
• #16: You can mark up Business or Organization contact information. This will help google to verify your business name, phone number, address, business hours, and other important information with directories across the internet, specifically Google My Business. This can also help Google associate your business with particular geographic locations, which will assist with your Local SEO rankings. You can even let Google know which social media accounts are associated with your business or organization. This makes it more likely that Google will populate more valid information in your featured listing for your business.
• #17: You can markup information on videos that you have embedded on your site. Since machines cannot yet watch and interpret videos in full, adding this information can let Google know that your video is relevant to the content on your site, and theoretically boost traffic to your page. You can let Google know how recent the video was published, the duration, and most importantly you can give them a description of what is happening in the video. This is a great place to add some keyword rich data. This can boost your overall organic ranking for a particular URL, boost your rank in video specific SERPs, and increase your chances of have a featured video popup on the organic SERP. With mobile devices being responsible for the majority of traffic online, and videos being a preferred method of content digestion on mobile, it’s important that we give Google the best information we can about videos.
• #18: One of my favorite rich data markups is Schema for Product Information. By marking up particular information about a product, you can actually have the price, rating, # of reviews, and availability listed directly in the SERP. As you can see on the right, the listing with this markup displayed instantly stands out above the rest. So even though it is not in the #1 overall spot, it will be able to capture more traffic because it is more appealing to a user. Overall CTR for product pages on Cabelas.com increased 13% when we implemented schema for product information. Ideally, you’ll also be lowering your bounce rate. Users that click on your listing will already be pre-qualified because they know the ratings, the price, and the availability of the product. This should stop what we call “window shopping”, where a user is just clicking on your listing to see your price and then instantly bouncing back to the SERP to check other prices.
• #19: As mentioned before, there are a number of online schema.org code generators that can help you to create working code to start marking up your site. Schema.org themselves provides examples that you can copy, as does Google Search Webmasters. They provide them in a number of different languages and formats, including my preferred JSON-LD method. Pictured, we have a code generator from Hall Analysis. You can see at the top that there is a drop down to allow you to select the type of code that you want to create, be it local business, organization, product info, etc. And then a number of fields to fill in with information, and on the right that information is spit out into the correct code format.
• #20: If you don’t find that the online generators have everything that you’re looking for, you can always create your own code generator using some basic concatenation formulas within Microsoft Excel and Google Sheets. Using a template from Google Search Webmasters, I created the pictured code generator here in Google Sheets. There are sections for inputs above, and the code is generated below. This allowed me to have all of the specific fields that I felt were important for our clients.
• #21: Google even provides a way for you to test your newly generated code before your go to implement it onto your site through GTM. The Structured Data Testing Tool. You can paste your code right into this tool, and it will ensure that your code is in the correct format, and that everything is recognized by Google. Once you see that your code is error free, you’re ready to start adding it to GTM.
• #22: So how do we go about implementing this code? Let’s run through an example for a fictitious product that my pretend company is selling.
• #23: Paul’s Bobblehead emporium sells this extremely rare King Tut Bobblehead. I have this product listed on a product page on my website, and I want to make sure Google has all the correct info about it. So the first thing I’m going to do is generate my Schema.org code that will allow me to mark up that information, either using an online generator, or using code I wrote myself. Then I’m going to verify my code using the structured data testing tool. Once I see that I’m error free, and Google is correctly interpreting all of my data, I’m ready to throw it into a tag.
• #24: We talked earlier about Custom HTML tags. This blank slate is going to be the perfect place to insert my newly generated schema code. So after navigating to GTM, I’m going to create a new tag and select CUSTOM HTML.
• #25: I’ve then pasted in my code into the tag configuration box. Be sure to label your tag, as you’ll likely have more than 1 product. Here I have called it “Schema – King TuT Bobblehead Product. Now I need to setup a trigger to fire this tag at the right time.
• #26: In this case, I want to configure my trigger in such a way that this tag only fires on the King Tut Product page URL. To accomplish this, I’m going to select the “Page View” trigger type. Next I want to select “Some Page Views”, and tell Google to only fire this tag when the Page URL of this page view contains the text “King-Tut”. You’ll want to be sure that whatever text you use is specific and unique to that URL only. I’ve chosen “contains” as my rule, but you could choose “exactly” to be more thorough. In some cases you might have a folder URL structure, and by using “contains”, you’ll run into an issue where you only want to tag the top level Folder page, but anything within that folder will also be included. So be sure you know whether you can use contains or exact match. Google will make sure that you have setup a trigger before you can save your tag and move forward, so don’t worry that you’ll forget it. You can now save the tag and move forward.
• #27: Once you’ve configured the tag and the trigger, it’s time to enter preview mode. Select preview mode in GTm, and then open a new tab in the same browser and navigate to your URL. You should see the GTM preview window populate at the bottom of the screen. Here you’ll be able to see whether or not your tag was successfully fired. In our case, we can see that the King Tut Bobblehead Product Schema tag has fired. If it has not fired, you can click on the tag to see why it has not fired and which trigger conditions have not been met.
• #28: Once you’re sure your tag fires correctly on the page you want, you’ll need to navigate to another page on your site to make sure that the tag is not firing when it shouldn’t be. In this case, we see here that the King Tut tag did not fire. Since we are not on the king tut URL anymore, the trigger conditions were not met, and the tag was note fired. This is what we want, and now we’re sure it working correctly on our site. If you see it firing when it shouldn’t, check which trigger conditions were met that allowed it to fire and go adjust those in GTM.
• #29: You can now publish your changes in GTM. But, before we’re going to call this 100% complete, we’re going to head back over to the structured data tool from Google, and this time enter the URL from our website to be tested. This will crawl then entire URL and find nay instances of structured data that has been marked up on your site. Here we can see that it is picking up both our local business schema, as well as our product schema. We can click to expand those to see the exact info Google in getting. Lastly, you’ll want to head to Search Console or the Mobile Friendly test in order to resubmit this URL for indexing. You could wait until Google recrawls your site, but might as well submit the page for indexing to get the data working for you more quickly.
• #30: We talked about rich data, now lets get into some advanced tracking metrics that can help you better understand how users are interacting with your website.
• #31: Scroll depth tracking is a very powerful tool that provides more indepth analysis of content engagement. This goes beyond just a pageview. This will let you know how far down on a page a user is actually scrolling on your site. Why is that useful? Well, lets say that you have important CTAs, or offers, or a contact form at the bottom of your webpage, and you’re not getting the conversions that you think your traffic indicates that you should. Using scroll tracking, we can actually see whether or not users are scrolling down far enough to reach those CTAs on your page. If you see they are not getting that far down, you can adjust the positioning of those elements. You can also compare this with Keyword Data on your site. Perhaps a certain search term is bringing a lot of traffic to your site. But you see low on page time and high bounce rate. Perhaps the information that answers those search queries is too far down and users are not scrolling down to find it. Again, changing the positioning of that information can lead to better UX.
• #32: Here is an example of what that data looks like with GA. The custom script actually creates a new metric within GA. We can see that less than 8% of users are making it to the bottom of this page. A mere 30% of users are even making it past the half way point. So data below the halfway point is not being seen by 70% of our users!
• #33: Screen time tracking is another useful metric. This will let you know how long a user actually has a portion of your page active on their screen. If you’ve placed an infographic in the middle of your content, you may not know whether or not users find it useful, or if they are just scrolling right passed it. With Screen time, we can see how long the portion of the page with the infographic is actually up on user’s screens. This gives us a true analysis of content engagement.
• #34: Hover tracking is another way that we can track user engagement. True, you can setup click tracking on non-clickable elements. But some users only hover over an element to see if its clickable. Sometimes users get confused and think something is a button or should link somewhere. If you see a high number of users hovering over one particular element on your site, you can use this as an opportunity to make it linkable or interactive in some way.
• #35: Let’s take a look at how we would go about implementing some of these advanced tracking scripts
• #36: Let’s say that I want to hover track this image of the Jason the JET Terry Bobblehead, which lives on a piece of content on my site. Maybe you want to recommended to the UX team that this should be linked to your product page, but you also want to have the data to back it up. Let’s install hover tracking on this image in order to give us some data.
• #37: These scripts are a bit more advanced than adding rich data markup. They’ll require custom variables and listening events. Fortunately, the online GTM community has made many of these scripts available for free download. The script I’m going to implement here is a hover tracking script from a company called Luna Metrics. Once you download your script, you’ll need to import it and merge it with your current container. Merging rather than overwriting, will allow you to import their script settings without losing any of the tags that you’ve already set up.
• #38: In order for this script to work correctly on your site, you’ll need to edit the custom hover listener variable that was created when you imported the script. Find the custom CSS Selector path for whatever element you want to hover track.
• #39: It’s fairly easy to find the CSS Path. Simply inspect the element in Google Dev Tools, right click on the element, and select “Copy Selector” under the copy menu.
• #40: And now you can past that directly into the custom variable value
• #41: Now you’ll need to create a tag. This time, create a Classic Google analytics tag, and select Event as the track type. You can use the fields to label the event in a way that you can easily identify it in GA As you can see here, I’ve labeled my tag as JET - Hover
• #42: You’ll also need to create a custom event trigger in order for this tag to fire properly when someone does in fact hover over the image. To do this, setup a rule that the Element should match the same CSS selector that you copy and pasted earlier. Save the tag and enter preview mode.
• #43: You can see here that before I hover over the image, the JET Hover tag has not yet fired. As soon as I mouse over the image, the tag fires, and sends the event data to GA. We can see from the preview that the tag is correctly working. So let’s publish the changes and go to the next step.
• #44: Once you publish your changes, we can go even 1 step further and actually see the data collecting in GA. Navigate to Real Time Reporting in GA, and check the events tab. Now go to your site and hover over your image. You can actually see the event tracking in real time. Now we know this tag is good to go!
• #45: So we’ve talked about the advantages of GTM, and we’ve reviewed the main components like Tags, Triggers, and Variables. We talked about marking up important data to make it easier for Google to digest, and seen an example of implementing Schema markup for Product Info. And we looked at the advanced tracking metrics Scroll Depth Tracking, Screen Time Tracking, and Hover tracking, and then saw an example of implementing hover tracking onto your site. Hopefully you find these useful and you are inspired to go markup and collect more data on your own website. Thank you all for your time.
• #46: There is a whole wealth of knowledge online, and here are some great resources to check out if you want to learn more about GTM. I particularly enjoy the free videos from MeasureSchool on YouTube. The host, Julian, does a great job of explaining basic, intermediate, and more advanced uses of GTM. If you want to track something, chances are there are resources out there that will help you track it.