Click text when using the Google Tag Manager - gtm.click {{Click Text}}

Question

Click text when using the Google Tag Manager - gtm.click {{Click Text}}

I have a list of shops with detailed information like opening hours and phone numbers. When a user clicks on the shop's name, I want the relevant details to appear using javascript.

I am trying to capture the shop's name (SHOP NAME) when a user clicks on it using Tag Manager, and then display this information in Google Analytics. However, my attempts in GTM have been unsuccessful so far.

Any assistance would be greatly appreciated.

Here is the code snippet:

<table>
  <tbody>
    <tr class="row" valign="top">
        <td class="locationGridColZip" onclick="javascript: locationGridAddressToggle(this);">
          <input type="hidden" name="ctl00$ContentRegion$ctl00$locationGridView$ctl02$hfStore" id="ctl00_ContentRegion_ctl00_locationGridView_ctl02_hfStore" value="2620|55,65739|12,35353">CITY
            </td>
            <td class="locationGridColImgOFF" onclick="javascript: locationGridAddressToggle(this);">
            </td>
            <td class="locationGridColAddress" onclick="javascript: locationGridAddressToggle(this);">
              <h3>SHOP NAME</h3>                    
            </td>
            <td class="locationGridColShow">
              <a onclick="javascript:map.setCenter(new google.maps.LatLng(55.65739, 12.35353));map.setZoom(12);" href="/butikker.aspx#gmap">SHOW ON MAP</a>
              <a class="countryGmap countryGmap1" onclick="javascript:map.setCenter(new google.maps.LatLng(55.65739, 12.35353));map.setZoom(12);" href="/butikker.aspx#gmap"><img src="https://cdn.fotoagent.dk/webshop/production_solr/images/gmapDanmarkAlt.gif" alt="Vis på kort" style="border-width:0px;"></a>
      </td>
    </tr>
  </tbody>
</table>

javascript google-analytics google-tag-manager

Answer 1

Answer №1

For those using jQuery, you can integrate it into a custom JavaScript variable like this (modify as necessary):

function(){
   try{
      var element = {{Click Element}};
      var locationName = $(element).closest('tr').find('.locationGridColZip').text().trim();
      if (locationName.length > 0){
         return locationName;
      }
      return 'undefined';
   }
   catch(error){
   }
}

Answer 2

For those using jQuery, you can integrate it into a custom JavaScript variable like this (modify as necessary):

function(){
   try{
      var element = {{Click Element}};
      var locationName = $(element).closest('tr').find('.locationGridColZip').text().trim();
      if (locationName.length > 0){
         return locationName;
      }
      return 'undefined';
   }
   catch(error){
   }
}

Answer 3

Answer №2

If you want to implement this feature using a custom JavaScript variable, you'll need to consider the specific context of your situation. Depending on which element the 'click element' refers to when triggering the tag, you can use a code snippet like this:

function ()
{
  return {{Click Element}}.querySelectorAll("h3");
}

For more examples of custom JavaScript variables, check out this resource: http://www.example.com/custom-javascript-variable-examples/

You can also find a comprehensive guide by Simo Ahava here:

Answer 4

If you want to implement this feature using a custom JavaScript variable, you'll need to consider the specific context of your situation. Depending on which element the 'click element' refers to when triggering the tag, you can use a code snippet like this:

function ()
{
  return {{Click Element}}.querySelectorAll("h3");
}

For more examples of custom JavaScript variables, check out this resource: http://www.example.com/custom-javascript-variable-examples/

You can also find a comprehensive guide by Simo Ahava here:

Click text when using the Google Tag Manager - gtm.click {{Click Text}}

Answer №1

Answer №2

Similar questions

What sets defineProps<{({})}>() apart from defineProps({ }) syntax?

Is it possible to transform a webpack configuration into a Next.js configuration?

How can we reset multiple selected values (mui chips) in a React Material-UI Autocomplete field when changing the value in a different field?

Is there a potential security flaw in jQuery when using $.get(code_url) to execute the returned code without relying on eval() or appending it to the DOM

Determine browser compatibility by evaluating the DOM Level

What is the best way to retrieve a linked filter in Vue from another?

How can I create a fading trail effect in Three.js that diminishes over time?

What is the best way to center a fixed position background image within a container that is slightly shifted from the top of the viewport?

Ways to retrieve the ID attribute value of the third ancestor above

What is the method for incorporating a variable in MapReduce?

Differentiating a path element in SVG by dynamically adding color using d3 and react

Vue Component Unit Testing: Resolving "Unexpected Identifier" Error in Jest Setup

As we iterate through each individual array within the multi-dimensional array

Encountering issues with reading undefined properties while working with react-chartjs-2 and chart js

Is the text in the React chat application too lengthy causing a bug problem?

Apollo-Server presents errors in a polished manner

I have the ability to effectively open a modal whenever necessary, but I struggle with closing it afterwards

Submitting Multi-part forms using JQuery/Ajax and Spring Rest API

Troubleshooting issue with file upload feature in Angular for Internet Explorer 9

Using a for loop, how can the property value be set in another object?