Upcoming LunaMetrics Seminars
Los Angeles - Anaheim, Sep 8-12 Washington DC, Sep 22-26 Boston, Oct 6-10 Chicago, Oct 20-24

Google Tag Manager Readiness Checklist: 42 Ways to Prep Your Site

Don’t wait until you urgently need a new tag to discover you also need your developers. Put the right infrastructure in place and reap the full benefits of Google Tag Manager.

May 25 is Towel Day

Google Tag Manager is so easy to use, you can start adding tags to a site as soon as the developers put up the GTM container code. To make the most of it, though, you will need your developers’ help.

Some information should not (or cannot) be hard-coded into the tags, because it depends on each visitor’s behavior on your site. What did the visitor buy? What articles did they read? What videos did they watch? What forms did they complete? I could go on (and do, below).

Your developers can pull information from the back-end of your site and make it available on the page. They can also prepare various page elements to work with Google Tag Manager’s listeners, rules, and macros. It all means smoother sailing for you when you want to add tags later.

Follow this checklist to prep your site for Google Tag Manager, and you’ll be ready for almost any tagging request. You’ll be the hero who always knows where your towel is.

Preload the data layer

1. Get familiar with the data layer. If you don’t already know about the object called the data layer, learn why you want one, what it looks like, and how Google Tag Manager uses it. Read my blog post for an intro to the data layer.

2. Data layer first, Tag Manager second. Make sure the Google Tag Manager container code snippet comes after the data layer. This ensures that tags needing data layer values will find them.

3. Check your URLs. In Tag Manager, you write rules to fire tags on different pages according to their URLs. Consider adding page template names to the data layer for easier rule-writing, especially if your URLs are hard to read.

1
2
3
4
5
  <script type="text/javascript">
     dataLayer = [{
       'pageTemplate': 'BrandPage'
     }];
  </script>

 

We’ll get back to the data layer in a moment. First, take a look at all the places a visitor can click or interact with your site.

Review forms and clickable elements

Google Tag Manager can listen for clicks on links, buttons, and form submits with auto-event tracking. But there’s “automatic” and then there’s “automatic plus” a.k.a. making your life easier with a little advance planning.

4. Add IDs to every important element. I can’t emphasize enough how much time you will save implementing tags when you can refer precisely to the elements you want to track.

5. Use the data- prefix. If you can’t change existing IDs, add “data-id=xyz” to elements you need to identify for tracking. Extend the data- prefix to any attribute, not just IDs.

1
2
3
4
5
  <div data-id="cta">
     <a href="/request-info">Get your free brochure</a>
     <a href="/live-chat">Chat with us</a>
     <a href="/video/12gz65hk" data-title="Prospect Video">Watch video</a>
  </div>

 

6. Watch out for “return false”. If any clickable elements use jQuery’s “return false”, change it to “event.preventDefault()” or Tag Manager’s listeners won’t work.

7. Track hover elements. As with clickable elements, having IDs or other unique attributes on elements where visitors can hover will make them easier to track. See my hover tracking post.

8. Do you have AJAX forms or content? Push an event to the data layer for forms that submit back to themselves, or for any AJAX-y content. Use the event info to send virtual pageviews if you need to create goal funnels.

9. Handling URLs with hash changes. You may not need a complicated solution to track pages where the hash is the important part of the URL. Read more about easy dynamic content tracking.

Add ecommerce to the data layer

To track purchases or donations, it is essential to pass the details from the back-end to the data layer on the receipt page where you can retrieve it easily via Tag Manager.

For Google Analytics or Universal Analytics, your receipt page data layer must contain:
10. Transaction ID.
11. Transaction Total. Usually the grand total the customer paid.

Along with an array of products, where each product must have:
12. Product SKU or Product ID. This label must be unique.
13. Product Price.
14. Product Quantity.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
  <script type="text/javascript">
     dataLayer = [{
        'transactionId':'12345',
        'transactionTotal':'60.00',
        'transactionProducts': [{
           'sku':'4545ABC',
           'price':'20.00',
           'quantity':'2'
        },
        {
           'sku':'2342DEF',
           'price':'5.00',
           'quantity':'3'
        }],
        'transactionSubtotal':'55.00',
        'transactionShipping':'5.00'
     }];
  </script>

 

For Google Analytics, your receipt page data layer may also contain:
15. Store Name or Affiliation.
16. Tax & Shipping. Two separate fields available.
17. Product Name & Category. See Sayf Sharif’s post about tracking product category combinations with Google Tag Manager.

Many conversion tags also ask for:
18. Transaction Subtotal. You could calculate this with JavaScript from the product prices and quantities, but why not pass it directly from the back-end where it’s already been calculated?

And it’s worth considering to include:
19. Customer ID.
20. Customer’s lifetime number of purchases.
21. Customer’s lifetime value.
22. Customer demographic info.

shopping-bags

23. Time stamp of purchase. Record the customer’s local time at the time of purchase, and use it to prevent repeat views of the receipt page from sending duplicate transactions to your analytics data.

Don’t forget to put a similar data layer on your cart page, showing:
24. Items in cart. Remarketing tags can use info about how many and which products a customer put in the cart.

Product pages may have a full-fledged data layer, including:
25. Product SKU or Product ID.
26. Brand Information.
27. Categories & Subcategories.
28. Reviews. Pass the number of reviews and the overall product rating to the data layer.

Add other page info to the data layer

Besides page template names, as suggested in item #3 above, there are many other pieces of information you might want to access via Google Tag Manager that are specific to individual pages or groups of pages.

For all kinds of content, from news and entertainment sites to blogs to non-profits to government agencies to self-service support sites, you may find one or more of the following labels helpful to add to the data layer:
29. Topics, Tags, or Taxonomy.
30. Authors.
31. Publication Dates.

1
2
3
4
5
6
7
8
9
  <script type="text/javascript">
      dataLayer = [{
         'author':'Yinzer, Joe',
         'topic':'sports',
         'taxonomyLevel-1':'NCAA Basketball',
         'taxonomyLevel-2':'2014 Tournament',
         'publicationDate':'2014-03-24'
      }];
  </script>

 

32. Comments. How many comments does an article attract? How long is the comment thread?
33. Upvotes or Downvotes. If you have a content rating system, add it to the data layer.
34. Length of article, or other attributes. Bonus tip: See Alex Moore’s post about using this info to create Content Groupings in Google Analytics.

And what about internal promotions or sponsor banners? If these can have specific element attributes as mentioned in item #4, above, then you can pull them directly into Tag Manager. If not, see if your developers can add to the data layer:
35. Internal promo ID or sponsor banner ID. You may also want to include a campaign name or sponsor name, especially if these can be easily pulled from the same database that puts the promo or banner on the page.

36. W3C Specification. The actual names of your data layer variables are entirely up to you, but if you’re starting from scratch, I suggest following the recently released W3C Specification, as explained by Jonathan Weber.

Add visitor info to the data layer

Just as you might put customer info in the data layer on your receipt pages, you might also put visitor info in the data layer on any page after the visitor has logged in. Anything a visitor has entered into a form, and you’ve stored in your database, can be returned to the page for easy access via Tag Manager.

Consider adding the following to the data layer:
37. Visitor ID.
38. Demographic info.
39. Membership level.

1
2
3
4
5
6
7
8
9
  <script type="text/javascript">
      dataLayer = [{
         'visitorID':'98765432MK',
         'age':'37',
         'gender':'male',
         'occupation':'university professor',
         'membership':'subscriber-level-3'
      }];
  </script>

 

40. Preferences or user settings. Use of favorites, wish list, or other options you may offer that allow visitors to personalize their view of your site.
41. Visitor ratings. Depending on the type of site you have, a visitor may be rated as a top commenter, trusted expert, etc.

Finally, think about adding:
42. Visitor IP address. Jon Meck lays out the case for using Google Tag Manager to exclude known IPs from visitors who are not customers, such as internal staff or vendors. You can keep unnecessary hits from ever reaching your analytics data, instead of filtering them out later.

Zaphod-Arthur-Ford
You won’t need everything in this checklist, but you’ll be glad you planned ahead when that last-minute tag request comes in, and you can just set it up in Google Tag Manager without placing a work order for your developers.

How have you handled prepping your site for Google Tag Manager? What obstacles or concerns do you still face? Did I leave anything out of my checklist? Please share in the comments.

Dorcas Alexander

About Dorcas Alexander

Dorcas Alexander is a Digital Analyst working with Google Analytics. Her path to LunaMetrics included stints in ad agency creative, math, computer science, language technology research, and corporate training. She loves to learn and teach what she’s learned. One of the top-rated tournament Scrabble players in Pennsylvania, Dorcas has an insatiable drive to compete and win. “Impossible” is not in her vocabulary.

http://www.lunametrics.com/blog/2014/03/24/google-tag-manager-readiness-checklist/

4 Responses to “Google Tag Manager Readiness Checklist: 42 Ways to Prep Your Site”

Ryan says:

Great post, Dorcas. Thanks!

Les says:

Great…. I was hoping to get a solid night’s sleep tonight Dorcas….. Thanks a bunch! ;-)

Thanks so much!

Custoemr ID is very nice ;P

Caroline says:

Perfect timing for this great information. We are investigating implementing Tag Manager in the months ahead.
Thanks!

Leave a Reply