Geplaatst op Geef een reactie

How to measure clicks in WPdatatables with Google Tag Manager

measure clicks in WPdatatables with Google tag manager

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

  1. 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
  2. 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.

By the way, I am running DuracellTomi’s Google Tag Manager for WordPress to connect my site to Google Tag Manager (GTM) and Google Analytics (GA). Please note that I do know how to use complex software, but I am not a real technerd or programmer. A bit of GTM background is helpful to understand this blog and sometimes it is just trial and error to find out what works and what doesn’t. Please note that these dataLayer variables only work on GA 2.0+.

In the pictures below, I have marked the data that I wanted to capture after a click.

Goal 1: Google Tag Manager capture the row data in WPdatatables after a button click in my car prices database

Google tag manager measure row in table on click

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

Google tag manager measure link in table on click

Goal 1: Google Tag Manager capture the row data in WPdatatables after a button click in my car prices database

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

  1. Category: {{page path}}
  2. Action: {{custom variable with the target URL of the click in a URL link column of my table with ‘button’}}
  3. 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:

GTM trigger configuration

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:

WPdatatables GTM row data custom variable

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’

Google Chrome on Mac developer tools tab console

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

Google Chrome developer tools dataLayer

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’)

Google Chrome developers tools WPdatatables GTM row data

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’.

GTM variable WPDatatables target URL

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.

GTM just clicks trigger

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’.

WPdatatables GTM column CSS

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.

WPdatables GTM clicks in table

I have used the following mearement plan for this tag:

  1. Category: {{page path}}
  2. Action: {{click URL}}
  3. 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

P.S. 3 Please share this blog if it was useful for you

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *