How to Use Google Analytics and Tag Manager with WordPress
If you have a WordPress blog you might want to integrate Google Analytics (GA). Instead of doing it directly with a plugin, however, consider integrating it by using Google’s Tag Manager (GTM) service. GTM gives you far more flexibility in tracking and will make your Google Analytics experience much more rich. I’ll give you a brief run down and a quick example to get you started.
Let’s say you’ve written a blog and want to find which articles people are finding most interesting. You decide that instead of having all of the text displayed for every post, instead you’ll write one paragraph and then include a “Read More” button that expands the post [This is a standard option in the WordPress post editor]. Then, you want to track clicks on any of these “Read More” buttons. This means you need two things: 1) a piece of code running on the page that will signal when a click event on the right objects happens and 2) a destination to record this data. GTM helps you build/deploy the listener and GA will record the signal.
First, go to both analytics.google.com and tagmanager.google.com to create free accounts if you haven’t already. You’ll need to follow the instructions and type in your domain. Let’s start by building the GA goal.
Click Admin -> Goals -> New Goal. In Goal Setup, choose Custom instead of a Template. In Goal Description, name it ReadMoreButton and select “Event” for the Type. In Goal Details we’ll fill out the following information: Category Equals to ReadMore; Action Equals to Click; Label Equals to ReadMore; Value Equals to 1. We’ve just defined a goal and it’s defined by these event details. We will use the same information in defining the signal that GTM will send to establish the hand-shake between the two services.
Now go to GTM. First, you need to deploy general Google Analytics to your site. (Note: If you previously had a GA WordPress plugin installed, deactivate it as this will take its place). In your Workspace, click Add A New Tag. Click the tag icon in the Tag Configuration card and select Universal Analytics. It will ask for your Tracking ID from GA. To get that, navigate to GA and click Admin -> Tracking Info -> Tracking Code. Copy and paste the text that looks like “UA-XXXXXXXX”. Leave Track Type to Page View and then click the icon in Triggers to select “All Pages”. Change the title of the Tag in the upper left corner of the screen to “ga-integration” and then save your changes.
This creates the code that needs to be embedded in all of your web pages that will allow Google Analytics to work on your blog. Instead of manually doing that, download the “DuracellTomi’s Google Tag Manager for WordPress” plugin. Once downloaded, activate and then just paste in your GTM id that looks like: “GTM-XXXXXX”.
Let’s pause and test the general GA integration. Open up a tab that has your GA dashboard and navigate to Reporting -> Real Time -> Overview. It should show a 0 because we never deployed our GTM tags/triggers. Open up another tab that has your GTM workspace. Next to the “Publish” button, expand the arrow and choose “Preview”. Now, open up a third tab and navigate to your website. If everything is working correctly you should have a GTM toolbar on the bottom of your page that contains Tags Fired On This Page: ga-integration. Your GA dashboard should now display a number > 0, representing you and whoever else might be there.
Now let’s create a tag/trigger for our Read More event. Let’s first create the tag in GTM by clicking Tags -> New. Give it a title of “ReadMoreTag” in the upper left corner. As before, in Tag Configuration choose Universal Analytics and add your Tracking ID. However, this time change Track Type to Event. Then, fill out Category/Action/Label/Value in exactly the same manner as we did when creating the goal in GA. This will result in GTM sending a signal to GA that has all the information GA needs to recognize this event as our goal. Leave everything else as the defaults. Also, leave “Triggering” blank for a minute and save.
We ignore triggering for a moment because, by default, several options are not available to us. To enable them, navigate on the sidebar to Variables and click Configure in the Built-In Variables section. I enabled everything in the Clicks and Forms section, though not all are needed for this tutorial.
To create our tag’s trigger, click Triggers -> New and then the icon. From the menu choose Just Links from the Click category. Under “This trigger fires on” select “Some Link Clicks”. This is where we will filter to only Read More links. In my case I filled this out to look like: Click classes equals more-link. This translates to: only trigger this tag if the link that they clicked on has the CSS class of “more-link”. To find your CSS class via the Chrome browser, right click on a Read More link and choose Inspect to view the html code on your page. The code for mine looks like this:
<a href=”http://zakjost.com/2016/01/deriving-the-normal-distribution-part-2/#more-257″ class=”more-link”><span>Read more</span></a>
Note that the class is equal to “more-link”, but yours might be different. Fill in the relevant CSS class information for the filter, give your trigger a name and save it.
Finally, we need to assign this trigger to your tag. Click Tags -> ReadMoreTag and then select our new trigger in the Triggering section.
To test, you should now go into Preview Mode and navigate to your site to test that the triggers fire. A quick tip: instead of clicking the Read More links normally, which refreshes the page and erases the GTA toolbar information, do a Cmd+click or Ctrl+click to open a new tab. This should preserve the data in the existing tab toolbar. If everything was done correctly you should see the toolbar say “Tags Fired On This Page: ga-integration, ReadMoreTag” after you Cmd+click a Read More link.
And lastly, if you return to GA and go to Reporting -> Real Time -> Conversions, you should see the ReadMoreButton Goal we created increment to a 1. Now you will know every time someone clicks a Read More button on your blog. Remember to turn off Preview Mode and Publish your work once you’re ready to deploy for real. Good luck!