Google Tag Manager Tracking Guide for WordPress

This guide shows you how to track:

• External Link Clicks
• Internal Link Clicks
• Affiliate Link Clicks
• Anchor Link Clicks
• 404 Errors
• Comment Form Submissions
• Contact Form 7 Submissions
• Subscriber Opt-Ins
• Social Follows
• Media Shares
• Social Shares

How to setup Google Tag Manager Tracking in WordPress

1. Create Google Account or Login to your existing Google Account
2. Sign into Google Tag Manager
3. Create a new Google Tag Manager Account (e.g. Penguin Initiatives)

4. Create a new Google Tag Manager Container for your website (e.g. penguininitiatives.com)

5. Copy your new Google Tag Manager Container’s GTM ID (e.g. GTM-P3XHZF):

6. Login to your WordPress website’s Admin Dashboard and go to Plugins > Add New
7. Search for “DuracellTomi”, click the “Install Now” button for “DuracellTomi’s Google Tag Manager for WordPress” and then activate the plugin
8. Go to Settings > Google Tag Manager
9. Paste in your Google Tag Manager ID and click the “Save Changes” button

Add Google’s Tag Manager Container Code Without a Plugin
If you don’t want to use a plugin to add your Google Tag Manager code to your WordPress website, then you can of course alternatively copy and paste the code snippet right below your opening body tag in your WordPress theme’s header.php file if you know how to do so. Note that if you do this instead you won’t get the WordPress dataLayer variables that DuracellTomi’s Google Tag Manager for WordPress plugin creates
10. Right click and save this Google Tag Manager Container Template for WordPress
11. In your Google Tag Manager account click on the “Admin” section
12. Select your new Google Tag Manager Account and Container
13. Click on “Import Container”

14. Then select the Google Tag Manager Container Template for WordPress JSON file you downloaded and import it
15. Now replace “yourdomain.com” with your website’s domain in the following Triggers: Anchor Link Click, External Link Click and Internal Link Click (you may have to refresh your container to see the newly imported Tags, Triggers and Variables)
16. Next replace “affiliatelinkpattern” with whatever URL pattern is consistent for your affiliate links, if your site doesn’t have affiliate links or they don’t use a consistent URL pattern you can skip this step
17. Finally replace the “Tracking ID” Variable with your website’s Google Universal Analytics Tracking ID (e.g. UA-61808155-1)
18. Save all your changes and Publish your Container
19. Login to your WordPress website’s Admin Dashboard and go to Plugins > Add New
20. Search for “WP Ajaxify Comments”, click the “Install Now” button for “WP Ajaxify Comments” and then activate the plugin
21. Go to Settings > WP Ajaxify Comments
22. Check the checkbox next to “Enable plugin”
23. Scroll down to the ‘OnAfterUpdateComments’ callback field”, then copy & paste in the following JavaScript code:
dataLayer.push({'event' : 'newComment'});

1	dataLayer.push({'event' : 'newComment'});


24. Scroll to the bottom and click the “Save Changes” button
25. If you would like to track Contact Form Submissions, simply use the Contact Form 7 WordPress Plugin to power your contact form
26. If you use Elegant Theme’s Bloom Email Opt-In WordPress Plugin and want to track new Opt-Ins you’ll need to do the following:
27. Download Bloom’s custom.js file from this location: /wp-content/plugins/bloom/js/custom.js and open the file in a text editor
28. Search for the following code (on line 405 in version 1.0.3):
set_cookie( 365, 'et_bloom_subscribed_to_' + optin_id + list_id + '=true' );

1	set_cookie( 365, 'et_bloom_subscribed_to_' + optin_id + list_id + '=true' );

29. Hit return after this line of code to create an empty line below it, then copy and paste the following code:
dataLayer.push({'event' : 'newSubscriber', bloomOptin : this_button.data( 'optin_id' ) });

1	dataLayer.push({'event' : 'newSubscriber', bloomOptin : this_button.data( 'optin_id' ) });

30. Now save your modified custom.js file and overwrite it via FTP
31. If you use Elegant Theme’s Monarch Social Sharing WordPress Plugin and want to track social follows, media shares and social shares you’ll need to do the following:
32. Download Monarch’s custom.js file from this location: /wp-content/plugins/monarch/js/custom.js and open the file in a text editor
33. Search for the following code (on line 11 in version 1.2.2):
share_link = 'media' == social_type ? $this_el.data( 'social_link' ) : $this_el.prop( 'href' );

1	share_link = 'media' == social_type ? $this_el.data( 'social_link' ) : $this_el.prop( 'href' );

34. Hit return after this line of code to create an empty line below it, then copy and paste the following code:
( media_url ) ? dataLayer.push({'event' : 'mediaShare', shareNetwork : $this_el.data( 'social_name' ), shareMedia : 'media' == social_type ? $this_el.closest( '.et_social_media_wrapper' ).find( 'img' ).attr( 'src' ) : '' }) : dataLayer.push({'event' : 'socialShare', shareNetwork : $this_el.data( 'social_name' )});

1

( media_url ) ? dataLayer.push({'event' : 'mediaShare', shareNetwork : $this_el.data( 'social_name' ), shareMedia : 'media' == social_type ? $this_el.closest( '.et_social_media_wrapper' ).find( 'img' ).attr( 'src' ) : '' }) : dataLayer.push({'event' : 'socialShare', shareNetwork : $this_el.data( 'social_name' )});

35. Search for the following code (on line 35 in version 1.2.2):
post_id = $this_el.data( 'post_id' );

1	post_id = $this_el.data( 'post_id' );

36. Hit return after this line of code to create an empty line below it, then copy and paste the following code:
dataLayer.push({'event' : 'socialFollow', followNetwork : $this_el.data( 'social_name' )});

1	dataLayer.push({'event' : 'socialFollow', followNetwork : $this_el.data( 'social_name' )});

37. Now save your modified custom.js file and overwrite it via FTP
38. Finally clear your cache and purge your CDN if needed, if you followed this guide correctly you should see the following in your Google Analytics > Real-Time > Events Report:

39. For slicing and dicing this data further I’ve also created this Google Analytics Advanced Segments Template you can import into your Google Analytics account

Additional Google Tag Manager Resources

• Understanding How to Use the Google Tag Manager
A nice high-level overview of Google Tag Manager on Search Engine Journal.
• Google Tag Manager Help Center
Google’s official help website for Google Tag Manager.
• Tag Assistant Chrome Extension
A very useful Chrome Extension that shows which tags are present and allows you to view events and variables that are available in the dataLayer. It is immensely helpful when you are testing and/or debugging.
• Google Tag Manager Posts on Simo Ahava’s Blog
Simo is essentially THE Google Tag Manager guru and has written an incredible amount of advanced guides, tips and other helpful resources on Google Tag Manager worth checking out.