Google Tag Manager Tracking Guide for WordPress

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. Google Tag Manager Account Setup Screen

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

  7. Copy your new Google Tag Manager Container’s GTM ID (e.g. GTM-P3XHZF):
  8. Copy New Google Tag Manager Container's GTM ID

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

    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

  14. Right click and save this Google Tag Manager Container Template for WordPress
  15. In your Google Tag Manager account click on the “Admin” section
  16. Select your new Google Tag Manager Account and Container
  17. Click on “Import Container”
  18. Import Container Google Tag Manager

  19. Then select the Google Tag Manager Container Template for WordPress JSON file you downloaded and import it
  20. 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)
  21. 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
  22. Finally replace the “Tracking ID” Variable with your website’s Google Universal Analytics Tracking ID (e.g. UA-61808155-1)
  23. Save all your changes and Publish your Container
  24. Login to your WordPress website’s Admin Dashboard and go to Plugins > Add New
  25. Search for “WP Ajaxify Comments”, click the “Install Now” button for “WP Ajaxify Comments” and then activate the plugin
  26. Go to Settings > WP Ajaxify Comments
  27. Check the checkbox next to “Enable plugin”
  28. Scroll down to the ‘OnAfterUpdateComments’ callback field”, then copy & paste in the following JavaScript code:
  29. WP Ajaxify Comments newComment dataLayer event callback

  30. Scroll to the bottom and click the “Save Changes” button
  31. If you would like to track Contact Form Submissions, simply use the Contact Form 7 WordPress Plugin to power your contact form
  32. 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:
  33. Download Bloom’s custom.js file from this location: /wp-content/plugins/bloom/js/custom.js and open the file in a text editor
  34. Search for the following code (on line 405 in version 1.0.3):
  35. Hit return after this line of code to create an empty line below it, then copy and paste the following code:
  36. Now save your modified custom.js file and overwrite it via FTP
  37. 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:
  38. Download Monarch’s custom.js file from this location: /wp-content/plugins/monarch/js/custom.js and open the file in a text editor
  39. Search for the following code (on line 11 in version 1.2.2):
  40. Hit return after this line of code to create an empty line below it, then copy and paste the following code:
  41. Search for the following code (on line 35 in version 1.2.2):
  42. Hit return after this line of code to create an empty line below it, then copy and paste the following code:
  43. Now save your modified custom.js file and overwrite it via FTP
  44. 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:
  45. Google Analytics Google Tag Manager for WordPress Real-Time Events

  46. 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

Want to track something else?

If you want to track something not covered here and need help getting it to work, please post a request in the comments and I’ll do my best to help you out.

How To Setup Retargeting with AdRoll

How To Setup Retargeting with AdRoll

What is Retargeting?

Retargeting is the practice of delivering highly-targeted advertisements to visitors of your website after they have left your website. Based on the pages they visited and/or didn’t visit you can create insanely relevant advertisements in an attempt to try and get them to come back and hopefully convert.

For example, if you’ve ever began purchasing an item on an eCommerce website and then left prior to actually purchasing the product, you’ve probably noticed ads that have followed you around from that website that are promoting the exact product you began the process of purchasing.

When you began the purchase process that website placed a cookie in your browser that uniquely identified you. The fact that you didn’t visit the final checkout page, and actually purchase the product, is what triggered the ads for that product to be pushed to you as you surf the web. Any website you visited after that point that runs ads from a general ad network then served that insanely relevant advertisement to you. It’s fairly common for these retargeting ads to be served up to you for 90 days after you’ve triggered  them.

Why should I retarget my visitors?

Because retargeting is the most cost-effective form of display advertising and you are likely missing out on lots of conversion opportunities if you’re not already doing it. Lots of times visitors will become distracted when browsing the web and retargeting acts as a form of insurance that you don’t lose them forever due to a minor distraction that may take place as they visited your website for the first time. It’s dirt cheap and extremely cost-effective so long as you earn money from your visitors through some form of conversion.

How much does retargeting cost?

While it depends on how many visitors you want to retarget. Keep in mind that you’re very likely only going to want to retarget a segment of your visitors that have navigated your website in a way that you’ve decided it makes sense to retarget them. To get a sense of cost for retargeting on your website simply look at the Google Analytics All Pages report for your website and use the “Visits with Conversions” segment to see which pages people are visiting that result in conversions. If you don’t have goals setup in Google Analytics you can instead just decide which pages people would visit that would indicate they are more likely to convert. Then add up all the visitors to those pages in a month’s time and multiply the total by $0.04 and you’ll have a pretty good idea of how much retargeting them would cost you on a monthly basis.

The following are some ranges of visitors and retargeting costs for your reference:

  • 10,000-25,000 visitors: $375-$750
  • 25,000-50,000 visitors: $750-$,1000
  • 50,000-100,000 visitors: $1,500-$3,000
  • 100,000-500,000 visitors: $3,000-$15,000

Why should I use AdRoll for retargeting?

AdRoll: Retargeting and Display AdvertisingAdRoll makes it incredibly easy to setup retargeting campaigns and they have stellar support if you run into any problems. You don’t even have to login to your account once you have your retargeting pixel code setup on your website. You can just tell them what you want setup and how and they will happily make it happen for you without charging you for labor. They’re the best in the business of retargeting, hands down.

In addition to being incredibly easy to use, they are partnered with all the major online advertising exchanges and networks. This means you don’t need to bother setting up retargeting in a bunch of different networks to get good coverage. AdRoll provides coverage for 98% of the web! There’s no reason or need to bother doing retargeting through anyone else, because their network already includes everyone else.

How do I start retargeting my visitors with AdRoll?

  1. Sign up for an AdRoll account.
  2. Enter the promo code “freetrial” to enjoy a free $60 credit for retargeting for the first two weeks of your new account.
  3. Login to your new AdRoll account and install their retargeting tracking pixel code on all the pages of your website and create a Privacy Policy page if you don’t have one already, making sure it’s linked to from every page of your website. If you don’t have a Privacy Policy you can save some time using TermsFeed to generate one for you for free.Install AdRoll Retargeting SmartPixel Code
  4. Create your first retargeting campaign.Create your first retargeting campaign in AdRoll
  5. Create your first user segment of the visitors to your site that you want to retarget, based on a page of your site they visited. Create as many as you see fit.Create new user segment for retargeting in AdRoll
  6. Create a conversion segment of the visitors to your site that you don’t want to retarget, based on a page of your site that they visited that you consider to be a conversion and set a conversion value. Create as many as you see fit.Create a new user segment for conversions that you don't want to retarget in AdRoll
  7. Exclude visitors who already converted from being retargeted so you don’t retarget them. Unless of course you want to retarget them for an additional type of conversion, in which case you should setup an additional campaign for this audience.Exclude visitors who already converted from AdRoll
  8. Upload all of your advertisements for your retargeting campaign.

    Valid sizes: 468×60, 728×90, 180×150, 300×250, 336×280, 160×600, 120×600, 120×240, 125×125, 180×60, 250×250, 120×60, 200×200, 300×100, 645×60, 300×600, 320×50

    Make sure to use UTM tracking parameters in your advertisement’s URLs so you can track your campaign results effectively in Google Analytics.

    Upload your retargeting advertisements for your AdRoll campaign

  9. Enter your payment information and remember to enter the promo code “freetrial” to enjoy a free $60 credit for retargeting for the first two weeks of your new account. Then launch your first AdRoll retargeting campaign!Lanch your first AdRoll retargeting campaign
  10. Continually track & optimize your retargeting campaign(s) to maximize success.
How To Speed Up Your Website With CloudFlare

How To Speed Up Your Website With CloudFlare

What is CloudFlare?

CloudFlare is a web service that makes websites faster and more secure. It offers a CDN (content delivery network) service, combined with optimization, security & DNS record management features.

Why should I setup CloudFlare on my website?

CloudFlare will make your website load significantly faster for free!

How to setup CloudFlare

  1. Create a free CloudFlare account
  2. Add your website
    Add Website To CloudFlare
  3. Wait for CloudFlare to scan your DNS records
    Wait For CloudFlare To Scan Your Domain's Current DNS Records
  4. Continue Setup
    Continue CloudFlare Setup
  5. Make sure CloudFlare detected all of your current DNS records by checking them (mine were managed on Namecheap in this example), if not add the missing ones
    Current DNS Records on NameCheap
  6. Once you have verified all your DNS records are in CloudFlare, click I’ve added all missing records, continue
    CloudFlare Detected DNS Records
  7. Choose the Free plan (unless of course for some reason you need a premium plan), for Performance choose “CDN + full optimizations (bleeding edge speed)” and leave the other settings as is, like in the following screenshot:
    Continue Settings
  8. Click Continue
  9. Update your name servers to point to CloudFlare
    Update Your Name Servers To Point To CloudFlare
  10. In Namecheap I do this by clicking on “Transfer DNS to Webhost”, the entering CloudFlare’s name servers and clicking “Save Changes”
    NameCheap Transfer DNS to Webhost
  11. Now in CloudFlare click “I’ve updated my nameservers, continue”
  12. That’s it, you’re done! Now just make sure that when your site switches over to CloudFlare your site still functions properly. If it has any issues you tweak the performance settings until you get your site working properly again. You want to find the combination of settings that maximizes performance, but doesn’t cause any issues with your website’s functionality.

NOTE: Since your website is now using a CDN, you’ll need to click on “Purge cache” whenever you make updates to your images, CSS or JavaScript files if you want the updates to be reflected on your website right away. CloudFlare has an awesome feature called “Development Mode” which you can turn on and it will temporarily disable caching so you don’t have to constantly Purge the cache when you’re making a lot of changes to your website. It will even automatically switch off after three hours if you forget to turn it back off when you’re done working on your website.

CloudFlare Page cache & Development mode options

Best Chrome Extensions for Bloggers & Web Developers in 2013

Best Chrome Extensions for Bloggers & Web Developers in 2013

Theme Sniffer

Detects the WordPress theme for the website currently being viewed.

Theme Sniffer Chrome Extension Screenshot

WordPress Plugin Sniffer

Detects the WordPress plugins being used on the website currently being viewed.

WordPress Plugin Sniffer Chrome Extension Screenshot

BuiltWith Technology Profiler

Detects the technologies being used on the website currently being viewed.
BuiltWith Technology Profiler Chrome Extension Screenshot

Web Developer

Offers an insane array of spectacular tools for web developers.
Web Developer Chrome Extension Screenshot

ColorPick Eyedropper

The best way to identify specific colors on a website.
ColorPick Eyedropper Chrome Extension Screenshot

Buffer

Makes it easy to share content.
Buffer Chrome Extension Screenshot

Pocket

Allows you to store links for future review without cluttering up your bookmarks. You can also automate social posting of your Pocketed content with The Social Media Content Sharing Automation Framework.
Pocket Chrome Extension Screenshot

Rapportive

Makes it easy to connect with people you exchange emails with on social media channels.
Rapportive Chrome Extension Screenshot

Alexa Traffic Rank

Provides quick access to Alexa statistics for the website currently being viewed.
Alexa Traffic Rank Chrome Extension Screenshot

SimilarWeb

Provides quick access to SimilarWeb statistics for the website currently being viewed.
SimilarWeb Chrome Extension Screenshot

PageRank Status

Shows the Google PageRank of the specific URL currently being viewed and additional stats if you open it up.
PageRank Status Chrome Extension Screenshot

WhatFont

Makes it really easy to identify fonts being used on any website.
WhatFont Chrome Extension Screenshot

Scraper

Allows you to easily scrape & export content that is consistently formatted.
Scraper Chrome Extension Screenshot

Mozbar

Provides useful link data and some on-page SEO analysis features for the website currently being viewed.
Mozbar Chrome Extension Screenshot

Evernote Web Clipper

A powerful tool for clipping, notating, capturing, annotating and storing content for future consumption.

Evernote Web Clipper Chrome Extension Screenshot

Sharaholic

Provides an incredibly easy way to share content on all your favorite social channels.

Sharaholic Chrome Extension Screenshot

bit.ly

Allows you to easily create & manage your shortened URLs.

bit.ly Chrome Extension Screenshot

Meta SEO Inspector

Provides a concise, behind-the-scenes look at all the meta information scattered throughout the code of the website currently being viewed.

Meta SEO Inspector Chrome Extension Screenshot

How To Manage Tags with Qubit’s Opentag Tag Management

How To Manage Tags with Qubit’s Opentag Tag Management

What is Tag Management?

Generally your website will use a series of primarily JavaScript tags for third-party services to enhance & track your website. Some sites end up using a lot of tags. Using a tag management service such as Qubit allows you to easily keep track of all your tags via a centralized dashboard for one website, or multiple websites.

Why should I manage my tags?

When you don’t manage your tags, over time you can lose track of them. This can lead to you keeping outdated tag references in your code, which can slow down your website while adding no value. You may not even recognize what certain tags are, what it is they do, or whether or not you even need them. It requires you to change your template files to add and remove tags.  This means all of your tags load separately, via different JavaScript files and web servers. If one web server is down or extra slow for any reason, this harms your websites’ load time. A good tag management service solves these issues.

Why should I use Qubit?

Qubit’s tag management service offers an incredibly powerful service called Opentag entirely free, for up to 1,000,000 monthly pageviews. The product is easy to use and reliable. Qubit’s Opentag service takes all of your various tags, with the rules you set for each and loads them as you see fit from a single JavaScript file that’s stored in their CDN for optimal speed.

How do I use Qubit?

  1. Create a free Qubit Opentag account on their registration page.
  2. Create a Container for your website.Qubit Create a Container
  3. Setup all your tags & the rules for where your tags load.They have templates for many popular tags to choose from, but you can also choose to add a “Custom Script” for any scripts not already in their system as a template as you can see below.

    Google Universal Analytics Tag Template

     

    Google Analytics Qubit Opentag Tag Template

    Custom Script Tag

    Custom Script Qubit Opentag Tag

  4. Commit your Container.
  5. Remove your tags from your website’s template files.
  6. Add their embed code before your site’s closing head tag.
  7. Test your site to make sure everything still works as its supposed to.
The Social Media Content Sharing Automation Framework

The Social Media Content Sharing Automation Framework

This framework is designed to save time and maximize exposure by automating the process of sharing manually curated content with your followers. This is the system we use on Penguin Initiatives, but it is by no means a one size fits all solution. It is merely one example of what can be done with the wide array of sophisticated tools freely available to inbound marketers today. We share this in the hope that it inspires you to create your own creative framework to meet your needs.

Framework Flowchart

The Social Media Content Sharing Automation Framework Flowchart

Framework Components & Functions

feedly

feedlyFind great content to share & save it to Pocket

feedlySubscribe to great content providers & auto-share providers you begin following on Twitter via Buffer via IFTTT

Blog RSS Feed

Blog RSS FeedWhen you publish a new blog post, have it automatically placed into Pocket via IFTTT

MailChimp

MailChimpWhen you publish a new blog post, have it automatically email your subscribers via MailChimp

Pocket

PocketAfter consuming great content in Pocket, tag said content with relevant hash tags and archive it to have it added to your Buffer

PocketTag your new blog posts with relevant hash tags and archive them to have them added to your Buffer

IFTTT

IFTTTAutomatically send new Blog Posts from RSS Feed into Pocket

IFTTTAutomatically add archived Pocket content to your Buffer

IFTTTAutomatically add announcements of newly subscribed feedly channels to your Buffer

Followerwonk

FollowerwonkDiscover the optimal Buffer schedule times based on the most active hours of your Twitter followers

Buffer

BufferAutomatically post your curated content to Twitter, as well as your Google+ and Facebook pages

bit.ly

bit.lyUse your own short branded domain for your URL shortener links in Buffer

Twitter

TwitterAutomatically tweet your curated content with relevant hash tags, at the optimal times via Buffer

Google+

Google+Automatically post your curated content to your Google+ Page with relevant hash tags, at the optimal times via Buffer

Facebook

FacebookAutomatically post your curated content to your Facebook Page with relevant hash tags, at the optimal times via Buffer

Pin It on Pinterest