AdWords is now Google Ads. Our new name reflects the full range of advertising options we offer across Search, Display, YouTube, and more. Learn more

4.7K members online now
4.7K members online now
Dive into multiple domain (Cross/Sub) tracking, implementing Ecommerce and Enhanced Ecommerce, setting up Event tracking, and Universal Analytics code.
Guide Me

Sorting pages by a variable in the body class tag?

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

Is there a way I can create a "content group" in GA or filter pages by pulling a variable from the <body class => of a page?


From my understanding our <body class = " variable1 variable2 variable3" I'd like to be able to pull analytics on pages where variable2 is the same.


Our GA is implemented through google tag manager.



Re: Sorting pages by a variable in the body class tag?

Follower ✭ ✭ ✭
# 2
Follower ✭ ✭ ✭
Hi Vincent,

it is surely possible, it only requires some Javascript coding and a certain level of knowledge of the GTM.

I write below a quick idea for a possible solution. I don't know if it is the best way, it's pretty raw (it is just to give you a first insight, not to be followed exactly as it is!) and I have not tested it... but I think that starting from this quick idea you may understand the process and manage to make it work.

1) You create a custom HTML tag in which:

- You retrieve the body classes via Javascript&colon;
E.g. var bodyClasses = document.body.className

- Then, you can split the bodyClasses variable in an array and get the second element, that should be assigned to a dedicated variable (e.g. "groupingClass").

Notice: for this to work, it is required that the position of the class by which you want to group the pages always remain the same, e.g. always variable 2. If the position in the array of the grouping class changes, you should design a method to identify the grouping class regardless of its position, e.g. via a prefix that can be always the same and unique for the grouping classes.

- You push a dataLayer like the following.

e.g. dataLayer.push({'groupingClass': groupingClass, 'event':'triggerPageview'});

The custom HTML tag ends here. It should be fired on All pages - DOM ready.

2) Then, you create a GTM variable that gets populated with the dataLayer's groupingClass value. Let's say that you call this GTM variable: "Grouping Class".

3) In the GA pageview tag, you set the content Group "X" parameter for your content group index X, populated with the variable Grouping Class. More info here:

This pageview tag should fire on the event "triggerPageview".

Take into consideration that altering the firing rule of the GA pageview in the way I described can introduce a small delay in the execution of the tracking code, because it would be now executed after DOM ready time + 2 tags executions.

To avoid this delay, you could also implement the same Javascript code described in step 1) directly in the website, after the body HTML tag and before the GTM container.

In this case, since the dataLayer is placed before the GTM container, you should use the syntax:

dataLayer = [{'groupingClass': groupingClass, 'event':'triggerPageview'}];

I think this solution would be better, because in this way you don't have to change the firing rule for the GA pageview tag, that would be triggered as usual, at the gtm.js event.

I hope that my explanation is clear enough, that it gives you some insight on the solution and that it works properly... test it carefully before publish! Smiley Happy