-1

I have some long lists of buttons. For example, i have one single list of car models that all have the same custom data attribute of "modellist", while they have also another data attribute which is the name of that car model (Note that these buttons are NOT links). the attached image Now, without the need of creating a single tag for each and every one of these buttons, i need to find a faster way for this case using the google tag manager and GA4 (google analytics 4), so that i would be able to track clicks on these buttons. Does anyone know how can i do this? I very highly appreciate your help & support here.

Codefanatic
  • 9
  • I think it's related to this https://stackoverflow.com/questions/73485124/tag-manager-js-variable-with-condition/ . Something like you want to track the data attribution but the button is the child element in the div. – darrelltw Sep 14 '22 at 02:35
  • Hi Darrellwan Can you please walk me through this in a better way? I need to know everything right from the start to the end!And please note that I had attached the screenshot of the code itself – Codefanatic Sep 14 '22 at 19:49
  • Yes I saw the scrrenshot. But can you share about the complete html in one of the div? This can help me better explaining the code. – darrelltw Sep 15 '22 at 03:25
  • Hi Darrellwan, Sure. I am attaching two screenshots right here, just please note that i need to implement it using google tag manager and Google analytics 4, and i need to know the complete steps to do this. I deeply appreciate your support.:https://fastupload.io/en/vBMDY6kHmgLtGTe/file https://fastupload.io/en/5fjf3K7H1LFYj22/file – Codefanatic Sep 15 '22 at 08:00

1 Answers1

0

Here are the steps and how to do it.

1. Create a Custom JavaScript Variable;

Here is the Screenshot enter image description here

The code is:

function(){
  // Get the click element;
  var clickElement = {{Click Element}};

  // Check there is a closet parent element you want. If it doesn't then return false;
  if(!clickElement.closest("div.stepped-selection__list-item"))
    return false;
  
  // Check the parent dom has the attribute you want. 
  // If it does, return the attribute value. Otherwise, return false;
  var modelListDom = clickElement.closest("div.stepped-selection__list-item");
  if(modelListDom.hasAttribute("data-trackervalue")){
    return modelListDom.getAttribute("data-trackervalue");
  }
  return false;
}

2. Create the trigger

Here is the screenshot:

enter image description here

First, using the click element > match css selector > To catch all the element inside the selector. You can modify it a bit to make it more suitable in your real case.

Second, the Variable we create in step1. It will return false if something not we expected. So we don't want to trigger the tag if the Variable is return false.

3. Create the Tag.

The Tag config is the easiest one.

Just use the Trigger in step2.

And give the event name and event parameter you would like.

Give the event parameter value as the Variable in Step1.

darrelltw
  • 1,734
  • 1
  • 10
  • 21