I recently spoke at DFWSEM’s monthly meeting, on the topic “Track Everything with Google Tag Manager.” We had a great time, talking about some (but by no means all) of the many wonderful things you can track using Google Tag Manager (check out my slides for more on that).
While I was prepping for the talk, Beth Kahlich hit me up on Twitter with this question:
I went into this briefly in my talk, but also thought I’d put together a quick tutorial on how to do this, since it’s super easy and a great way to track the life cycles of your content pieces.
Step 1: Find the Publish Date’s Unique CSS Selector
We’ll assume, for simplicity’s sake, that you already have Google Tag Manager up and running. If so, your first step is going to be finding the unique CSS selector for the publish date in your WordPress theme. You can do this by selecting “Inspect Element” and viewing the publish date in the Dev Console in Chrome.
On the UpBuild blog, the publish date is in a tag called <time>. We want to be as specific as possible when pulling in the publish date, and we’re not sure if the <time> tag is in use elsewhere on the site (we could check, but that would take some time), so we’re going to pull in the parent elements as well in our selector. The full selector we’ll use here is main#genesis-content>article>header>p>time. It’s a little inelegant, but it’s very specific, and that’s what we’re going for.
Step 2: Create a GTM Variable
Now we want to create a variable in Google Tag Manager for the publish date. To do that, we’ll create a variable of type DOM Element, with CSS Selector as the selection method, and tell the variable to look for the ultra-specific selector we picked out in the previous step.
Step 3: Create a Custom Dimension
Now it’s time to head over to Google Analytics. In Property settings, we’ll set up a custom dimension called “Post Publish Date”:
Because we want to capture the post publish date of every post that users interact with, as opposed to one per user, we’ll want this dimension to have a scope of Hit. Then we’ll take a look at what number the dimension is – in this case, it’s dimension 5.
Step 4: Add to our Universal Analytics Implementation Tag
UpBuild is already using Google Tag Manager for our Google Analytics implementation, which means we don’t need to create a new tag to capture our new custom dimension data – we can make changes to the existing tag.
(As you can see, we’ve had this tag in place since before GTM’s new Google Analytics Settings feature, so we’re still adding in our UA Tracking ID in overriding settings).
Since we know that our new custom dimension labeled “Post Publish Date” is dimension 5, all we have to do is tell the tag to capture the custom variable we set up in step 2 and pop it into dimension 5.
Step 5: Preview and Test
Now it’s time to make sure that GTM can properly detect the post publish date and capture it as a variable. Since the variable is a DOM Element, we expect to see it when the DOM is ready:
BOOM! Our Post Date variable is populating with the correct value of ‘May 23, 2017’.
Step 6: Publish and Bask in the Data
Now we just publish our workspace (making sure not to publish any work-in-progress tags), and wait for the data to roll in:
And there we have it!
Some Things to Note
In the screenshot above, note that for pages that don’t have a publish date (i.e. non-blog pages on the UpBuild site), the value for the Post Publish Date dimension is “null.” This is what we’d expect (since the publish date isn’t present on those pages, there’s nothing for the tag to find and put in the custom dimension field), but you’ll want to educate your data consumers (clients, internal stakeholders, etc) on what this means so they aren’t taken aback by it. It’s easy enough to use GA’s filtering functionality to only display blog post pages in a report or widget.
As you can see in the screenshot of the GTM Preview environment in Step 5, GTM is grabbing the date as a string, rather than a number. What this means is that if your dates are formatted with the name of the month (May) instead of the month number (05), like ours are, Google Analytics isn’t going to automatically understand that those words correspond to numbers. This can affect your ability to e.g. sort nicely within the interface, since it will sort alphabetically by word (April, August, December, February) instead of by numerical date:
There are a few possible ways around this, depending on your needs, resources and abilities:
- Export the data into Excel/Google Docs and do some find-and-replace action.
- Update your theme to display the date as a number rather than a string.
- If you have your date marked up to include ISO-9 format as part of e.g. semantic markup, you could pull in that value, instead. See the dev console screenshot from Step 1 – if we wanted to, we could pull in the datetime value instead.
Of course, you can use this methodology to pull in pretty much any piece of data with its own unique CSS selector and use it as a custom dimension in Google Analytics. Just another way that Google Tag Manager makes reporting with GA a lot more powerful.
