How to measure clicks in WPdatatables with GTM

Ok, I know. This blog ‘How to measure clicks in WPdatatables with GTM’ (Google Tag Manager) is completely off topic for this car lease price comparisons website, but I wrote this for two reasons:

There is nothing about measuring clicks in tables, in this case WPdatatables for WordPress, with GTM on the Internet (also the supplier could not tell me how to do this) and you might find this solution helpful

If you like this post, please share it as it helps the SEO ranking for my startup family business

The issue

For this price comparison website I am using the paid version of WPdatatables for WordPress to publish my database with lease prices for cars in the Netherlands, a local fenomenon called private lease. A second database is used to publish links to online car magazines to provide background information for my visitors, helping them during orientation. To improve my site, I am interested in the visitors’ behaviour on my website to know which parts on my site are interesting and which parts are not. Therefore I wanted to measure the clicks on the links in my two tables, which did not work with only out-of-the box GA and GTM. I needed to create new custom fields and triggers based on the GTM dataLayer (which captures a lot of data on every event). For every item in the GTM dataLayer a custom variable can be made. This blog explains how I was able to catch the data I was looking for.

Once GTM for WordPress is working, the following measurement plan is used for this table:

Category: {{page path}}

Action: {{custom variable with the target URL of the click in a URL link column of my table with ‘button’}}

Label: {{All the row content in the table related to the click}}

Step 1 – setting up a trigger

In GTM, I created a trigger that activates when someone clicks on a button with the text ‘bekijk’. Please note that this trigger is text specific and not table specific:

Publishing this trigger and enabling the GTM preview mode is required for the next step, as we need to create a custom variable to Tag the data in the dataLayer created by this trigger.

Step 2 – creating a GTM custom variable

This is the difficult part. To be able to get all row data related to the click, I needed to create a custom GTM variable that extracts the related data of the row from the GA dataLayer:

This custom variable is a ‘GTM data layer variable’ with in this case the path ‘gtm.element.parentNode.parentNode.parentNode.innerText’ that returns the whole row in one field. But how do you get this path? I used the Google Chrome development tools on Mac. Other browsers have the same functionality, but it will look a bit different.

Step 3 – finding the location of the variable

In the Developer tools of my browser, I opened the tab ‘console’

Within the console tab, type ‘dataLayer’ (case sensitive)

After clicking through the data I found the data I wanted to capture (in this case the GTM.element button.button with the path ‘parentElement/parentElement/parentElement/innterText’)

After hoovering over the text with my mouse, the path appeared (on Mac). By removing the ‘[“” – “”]’ I had the path I was looking for. I created a second GTM variable to capture the target URL, which in this case is located at ‘gtm.element.parentElement.href’.

Step 4 – create a tag

By creating a tag in GTM with both the variables for the data in my row and the URL, I was able to report the data I was looking for the GA.

Goal 2: Capture target URLs in WPdatatables after a link click

This one was easier, as this did only require a specific trigger and a Tag. There was no custom variable needed.

Step 1 – click trigger

I created a new trigger for ‘ just clicks’ and added the CSS for the column in WPdatatables that contains the clicks I wanted to measure.

You can find the CSS with the Developers tools in your browser. This time in the tab ‘Elements’, search for the column you want to measure and select the CSS path. In my case ‘td.column-articlelink > a’.

Step 2 – create a tag

This was not the most difficult part. After creating the trigger for the column I wanted to measure, I just created a tag that showed the {{click URL}}in the action field, triggered by the newly created trigger to measure URLs in WPdatatables after a link click.

I have used the following mearement plan for this tag:

Category: {{page path}}

Action: {{click URL}}

Label: ‘Article click count’

P.S. Special thanks to my colleague Steven Mannes who helped me with creating the above solution with just a 5 triggers, variables and tag (where I needed >70 for my previous solution)

P.S. 2 The pictures in this blog are created based on this page: Renault Twingo