If you have a blog or work with content, you will likely want to know which type of posts are viewed most frequently by your readers. Google Analytics provides a lot of options for tracking content: it will show you what specific posts were the most viewed in the Top Pages report, allows you to group content together with the Content Grouping function, and lets you add attributes like author or post date into custom dimensions.
The problem arises in the common case where you have multiple categories or tags that apply to a single post, since both Content Grouping and Custom Dimensions set just one value per category. Therefore this tutorial will show you the setup steps and scripts to produce an Event tracking report showing the most popular blog categories and tags on your site.
For a quicker start, in the final part of the post I've provided a downloadable Google Tag Manager (GTM) container that includes all the tags and scripts referenced in this post.
STEP 1: COLLECT EACH BLOG POST CATEGORY INTO AN ARRAY
This is the most varied step, so we'll start here: we need to gather together all the blog categories into an array. To make this as generalizable as possible, I'll use WordPress for the example, and JavaScript to access the necessary values. This way you can do everything through Google Tag Manager, and don't need to change any of your backend site code (though if you're a developer you may prefer to, and can do it that way instead).
WordPress often lists all the blog categories within an <article> tag near the top of the page. You can click Ctrl-U to view the page source and check if this is the case for your blog. The categories are all class names prefaced with the word 'category', while tags are all prefaced with the word 'tag'.
For this example we'll extract the list of categories, so we write a script to loop through the list of classes and push all the ones prefaced with "category" into a new array. Extracting all the tags would be done exactly the same way, just changing the text from "category" to "tag" in the script.
function(){
var array1 = document.querySelector("article").classList;
var aLen = array1.length;
var catArray = [];
for (i = 0; i < aLen; i++) {
if (array1[i].search("category") >=0) {
catArray.push(array1[i]);
}
}
return catArray;
}
If your WordPress blog shows the list of categories in an <article> tag as shown above (many do), you can just copy and paste the above script into a Custom JavaScript variable in Google Tag Manager.
If it doesn't, or you're not using WordPress as your blogging platform, you'll need to inspect your site and write your own code to pass the categories into a GTM Variable containing an array. Once you've done that, the rest of the steps are the same.
The output in the GTM Preview pane will look like this:
STEP 2: PUSH THE ARRAY VALUES INTO THE DATA LAYER
Create a custom HTML tag with the following script. It loops through the content category array and for each element within it, pushes the value and a GTM event into the data layer.
<script>
var contCat = (({{JS - Content Category Array}} == undefined) ? '': {{JS - Content Category Array}});
if(contCat != '')
{
for(var i = 0; i<contCat.length; i++)
{
dataLayer.push({'contentCategory': contCat[i],
'event':'contentTracker'});
}
}
</script>Set it to fire on All Pages - DOM Ready. This will delay the push slightly to ensure the category values are available in time.
STEP 3: CREATE A TRIGGER
Set up a trigger based on the 'contentTracker' event that gets pushed into the data layer by the custom HTML tag. This is done at Triggers > New > Custom Event, Event name = contentTracker.
STEP 4: ADD A DATA LAYER VARIABLE
The custom HTML tag is also setting a data layer variable with the key called 'contentCategory', so set up a data layer variable to read it:
STEP 5: SET UP THE EVENT TAG
We now have all the components: the blog categories in a data layer variable, and a trigger to send them off to the Google Analytics servers. The final step is to put it all together into an event tag. Navigate to Tags > New > Universal Analytics and make the following selections:
Track Type = Event
Category = Content Categories
Action = {DL - Content Category}}
Label = {{Page Path}}
Non-interaction Hit = True (this will stop the events from affecting bounce rate)
Firing Trigger = Event - ContentTracker
Fill in your Google Analytics tracking ID, and you're done.
CONCLUSION
After completing the above steps, you can navigate to Behavior > Events > Top Events and drill into Category = Content Categories to see a list of all your blog categories or tags, ranked in order of highest views.
Finally, to provide a quick start, I've compiled all the scripts and tags above into a downloadable container you can import into your own GTM account. Right-click the link and click 'Save link as' to save them to your own computer: GTM Blog Categories Container
Once you've downloaded the container, in Google Tag Manager, navigate to Admin > Container and click Import Container. When you choose to import the container, put it into a new workspace and choose the options Merge and then Rename conflicting tags, triggers, and variables. This will ensure that nothing affects your existing GTM setup.
I was just about to implement google content group when I found this article. Are there any downsides of using events instead of content groups?
With content groups, you can only assign a page to a single category. With this method, you can assign a page to multiple categories. If you only need to assign a page to a single category, just use content groups -- it is super easy to set up and doesn't require any custom code.
Hi Ana. Thanks for the prompt reply. For some reason, I didn't get an email notification. Just to be clear, if I have one blog post tagged with category-paid-search and category-reporting. If it got 3 visits, it would look like your report with each category having 3 visits?
Right, your report would have one line for category-paid-search showing 3 visits, and a second line for category-reporting showing 3 visits.
Thanks!
Hey Ana,
with this setup, I am trying to see within each category what people are clicking on... Thus this would mean checking for another type of event within another event...
See what I mean?
Is there a way to cross these two together?
Hi Julien!I'm not totally sure what you're looking for, but in general think of what you want the output to look like and then work backwards.
Do you want something like this?
Event category = {{Content Category}} //e.g. Marketing
Event action = Clicked Link
If so, then you'd just need to identify which content category they're in and pass that into the category. Typically you can identify the content category via the URL, the data layer, or some text on the page.
Please let me know if that makes sense.
Thanks for all your help and consideration Ana. Your post is 100% true, this code is great and work.
Hi - thanks for this article and step by step instructions. I wanted to confirm I understand what you meant when you said the following, "After completing the above steps, you can navigate to Behavior > Events > Top Events and drill into Category = Content Categories to see a list of all your blog categories or tags, ranked in order of highest views." I thought that meant that I could see in Google Analytics the total number of page views that contained a particular tag that is in use on our site. For example, we have articles instead of blog posts. We tag our articles with keywords like lighting, video, audio. We want to see in Google Analytics how many times any article with the tag "audio" has been viewed. I thought that is what you meant in your last sentence for implementing this solution. We had our 3rd party web team implement the solution but instead of showing us the total number of page views for that tag we are getting the total number of articles that are live on our site that uses that tag. I am trying to figure out if I misread the end result of the solution (total page views for the tag) or if our implementation is not correct.
Hi Rebecca, thanks for the message. You've understood this article correctly. The tracking should show you the number of times an article with that tag was viewed (i.e. the number of pageviews for that tag).
I checked your site and it looks like tracking on your site is implemented correctly. I just navigated to a couple of articles on your domain, and in the GA debugging tool, I saw 1 event fire for each tag that I viewed.
How are you determining that event counts refer to 'the total number of articles that are live on our site that uses that tag'? From what I can tell, that's not the case here.
Thanks. This is useful but at step 5 there is also a field for 'Value'. Should this be left blank?
Yep, you don’t need an event value here. Just leave it blank.
Thanks for the quick response!
Should I remove the google analytics code from my website (just the stadard vanilla GA tracking code) and use the tag managr code only?
Yep, you should either add GA code to your site or install GA through Tag Manager, not both.
Thank you, can you tell me: if I follow this guide is that installing GA through tag manager or do I need to take an extra step(s)?
This guide is only for tracking blog tags and categories in GA via GTM, it isn't for general installation of GA. Here's a link to Google's instructions for that: https://support.google.com/tagmanager/answer/6107124?hl=en
Thak you for your guidance!
Hi. Thanks for this excellent guide. I have set up the code exactly as you provided here and it seems as if only the last item in the array is being recorded in analytics. So if I have a post with category-1 category-2 category-3 Even though all 3 will be contained within the resulting array, only category-3 seems to be captured by tag manager and pushed to analytics.
Hey there, I can't really say anything specific without seeing your setup, but if it's not working correctly, then you'll need to walk through each step to identify where the issue occurs. Check your JS - Content Array variable in GTM Preview mode to confirm that all the categories are populating correctly in an array (it sounds like you've done this part). Then check the data layer to make sure that the contentTracker event gets pushed correctly, and check your contentCategory data layer variables. Are 3 events getting pushed or only 1? If only 1, then there's some issue with the cHTML - Content Categories script.
Thanks for the article.
I implemented everything on my two sites and I am getting a lot of data that I will use to improve my SEO.
Nice, thanks for the feedback.
Hi Ana,
I implemented and afterwards I am getting Blog Post Categories as my Event Action and it will not let me drill down any further to my specific categories. Any ideas?
My second question is if I do fix it to get results like you have pictured above, if I click on "category-categoryname" will I be able to see the URLs that are being viewed under that specific category? That is my actual main end goal. For example, I want to click on my Halloween Category and see all the URLS and pageviews those are receiving in a set time frame. I appreciate your help.
Hi Cheryl, I checked your site and I see the content-tracker event populating correctly for each of your blog categories. So all looks good with the code, which means any problem must lie with the event tag setup in GTM. Can you please go back to step 5 and make sure the event tag has event action =
{{DL - Content Category}}and event label ={{page path}}?As long as you set it up like that, you should be able to see the exact URLs and pageview counts for each specific category. Let me know if you still have any issues.
Hi Ana,
Thank you so much for this blog, I have implemented your solution and it looks great! Just had one question - when I add 'page' as a secondary dimension to the top events page, why do the number of pageviews differ for categories of the same page? For eg. I have the categories 'checklists' and 'baby-registry' for the same page but the pageviews for them is 440 and 439 respectively.
I appreciate your help with this! Thank you so much.
Hi, thank you for your comment -- I'm glad the post was useful. However, I'm not really sure why events and pageview counts would be different here. It sounds like the difference is really small, just 440 vs 439? In that case, it could just be the natural unreliability of JavaScript tagging, e.g. hits don't always fire if someone navigates away before the code finishes running.
Very detailed and super easy to follow along, thank you very much!!
Just implemented this for a client. THANK YOU!
Awesome, thank you so much for the comment 🙂