I have 50 items in my CMS that are shown on my home page as tabs. They essentially show company information and when an item is clicked it opens that companies website in a new tab. My aim is to know the number of times a companies profile (CMS item) is clicked.
I’ve set up Google Analytics successfully and added Custom Attributes to one of the CMS items which have subsequently added it to all of them.
How do I go about differentiating between the different CMS items to know the number of clicks on an item by item basis?
Am I even going about this in the most effective way?
I’m assuming you’re using the custom code field or embed function to add the event listener from Google Analytics? In that case, insert a custom field from your CMS item in one of the event category/action/label/etc fields:
So the event trigger should be on click of a company tab link? If the tab link contains text with the company name, you could use a script that reads the text from here and sends it as part of the event payload to GA.
You would put this script in the body code of the page in question.
<script>
// reference all the tabs on the page
const tabs = document.querySelectorAll('.w-tab-link');
// add a click event listenter to each tab
tabs.forEach(function (tab) {
tab.addEventListener('click', function () {
// send click event to GA with the company name as eventValue
ga('send', {
hitType: 'event',
eventCategory: 'companies',
eventAction: 'click',
eventLabel: 'company tab clicked',
eventValue: tab.firstChild.innerText
});
});
});
</script>
This seems like it could work. Although it’s not the tab link clicks I want to track, it’s the actual tab results (eg, I would click on companies in UK and I would be show a list of companies in the UK. I can then click on one of them to go to their website. That’s the click I want to track.)
The way that I have it set up now is with the following code in the Footer Code:
<script type="text/javascript">
//GA Event Tracker Script. Licensed under MIT. Free for any use by all. Written by Paul Seal from codeshare.co.uk
// Get the category, action and label from the element and send it to GA. The action is optional, because mostly it will be a click event.
var trackClickEvent = function () {
var eventCategory = this.getAttribute("data-event-category");
var eventAction = this.getAttribute("data-event-action");
var eventLabel = this.getAttribute("data-event-label");
var eventValue = this.getAttribute("data-event-value");
ga('send', 'event', eventCategory, (eventAction != undefined && eventAction != '' ? eventAction : 'click'), eventLabel, eventValue);
};
// Find all of the elements on the page which have the class 'ga-event'
var elementsToTrack = document.getElementsByClassName("ga-event");
// Add an event listener to each of the elements you found
var elementsToTrackLength = elementsToTrack.length;
for (var i = 0; i < elementsToTrackLength; i++) {
elementsToTrack[i].addEventListener('click', trackClickEvent, false);
}
</script>
And on the CMS item I have Custom a attributes of:
data-event-category = Brand Card
data-event-label = Brand Card
I’d like the ‘data-event-label’ to be the company name but I’m not sure how I can incorporate your suggestion into that? Apologies if it’s a stupid, I’m a real no code webflow user
Any unique identifiers you add to a collection item in a list will add it to all of the other items in that list as well. But the good news is that you can differentiate between them and can do it without code.
It takes a few steps but you can set up a trigger in Google Tag Manager which picks up when someone clicks one of the CMS items and sends that information to Google Analytics.
In GTM, first set up a trigger based on the custom attribute that you added to the collection items (or just use the ID) )
Set up a tag which sends that click information to GA. Select “Click Text” so it sends the text contained inside the specific element someone has clicked on.
Publish your changes and then anything you click on should appear in Google Analytics under the “Events” tab.
Let me know if you’d like detailed instructions. Happy to walk you through it
Put this in the body code of your page and you should be good.
<script>
// reference all the brand cards on the page
const brandCards = document.querySelectorAll(
'[data-event-category="Company Profile"]'
);
// add a click event listenter to each card
brandCards.forEach(function(card) {
card.addEventListener("click", function() {
// send click event to GA with the company name as eventValue
ga("send", {
hitType: "event",
eventCategory: "companies",
eventAction: "click",
eventLabel: "brand card clicked",
eventValue: card.querySelector("h3").innerText
});
});
});
</script>
It’s hidden by default (no idea why!). Go to Variables on the left, click the Configure button next to Built-In Variables and then check all of the options under ‘Clicks’.
For the trigger, you want to select ‘Click - All Elements’ and then select Some Clicks so you can filter it by an ID that you’ve added to the cards:
I’ll try to go the no code way first as I think it would be better for me to figure it out so I know for the future/if anything breaks … I always have the code to fall back on!
Appreciate the help guys, you really are awesome!
Adam
I’m having a similar issue, and wanted to follow up on this last question about unique IDs. On my site, there are multiple collections within one page, but I’d like to track the specific resource clicked. (Currently, I can only track the collection as a whole.)
I’ve been a bit lost on GTM and seem to be having more success with code, but open to any recommendations. Thank you!
Hi @Carolyn_Sams and @jbarrozo, it’s fairly tricky to track CMS items with GTM. You could potentially do it by placing an HTML embed in the CMS item with a div that cover the entirety of the parent CMS item. For that div you could set the id equal to the slug.
To get the slug, you paste the below code inside that HTML embed.
So your embed would look something like this:
div id="{{wf {"path":"slug","type":"PlainText"} }}" style=""></div>
In the style you’d need to apply custom CSS to make sure it covers the full section of the parent div. I’d think you want a z-index so that it’s high enough in the order of elements to get picked up by the click tracking. Also, you may need custom JS to ensure that the custom
does not prevent the browser from carrying out any interactions (for example clicking it sends users to a page).
Lastly, if you want a really simple way to track clicks on CMS items, I’ve built a tool that does just that.
… I always have the code to fall back on!