-
Posts
-
Hello,
I am using Google Ads in combination with Google Tag Manager (GTM). In order to measure clicks on my buttons I use the Click ID value in GTM. I have noticed that Enfold buttons don’t have a Click ID setup. I can link on the Click Text field, but that is very risky if somebody changes the text in the button my conversion will not be measured. Is there a smart way to give every button element in AVIA editor a fixed automatically generated Click ID?
These are the values that Google Tag Assistent can identify of the Enfold AVIA button:
Click ID Data Layer Variable string “”
Click Target Data Layer Variable string “”
Click Text Auto-Event Variable string “Blabla”
Click URL Data Layer Variable string “”Hope you can help me out?
Hey envis,
Thank you for the inquiry.
You can apply a unique ID or class name to the button in Advanced > Developer Settings > Custom ID / Custom CSS Class field. Please check the documentation below:
— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support
Best regards,
IsmaelIsmael,
Thanx, I thought about this option, but I thought it might get a bit messy with Google Tag Manager (GTM). So I am trying to match in GTM the button with the element. Tried matching #buttonCheckAvailability with contains, RegEx match and matches CSS selector. All options did not work :(
I know this might be outide of support, but maybe you know top of mind if this can be fixed in GTM?
Hi,
Where can we check the button? Have you tried using Click Classes instead of Click ID in the trigger condition?
— https://support.google.com/tagmanager/answer/7182738?sjid=13411867830563470274-NC
The trigger condition can be set to Click Classes > contains > “custom-element-class”. The class “custom-element-class” can be added in the Button element’s Advanced > Developer Settings > Custom CSS Class field. Please note that the changes in the console might take some time to propagate or take effect. You may need to test if the changes apply after a few hours.
Best regards,
IsmaelIsmael, thanks for your speedy reply :)
When I add the class buttonCheckAvailability to the Full Width Button, it gets added to the div that is around the anchor, and not the anchor itself. So I don’t see it in GTM click event.
<div class="avia-button-wrap avia-button-center avia-builder-el-16 el_after_av_hr el_before_av_hr buttonCheckAvailability"><a href="/nl/boeken/" class="avia-color-theme-color avia-font-color-theme-color avia-button avia-button-fullwidth av-m95js28t-fb8d4636b31ee7e65fa48052fce1844e avia-icon_select-yes-left-icon avia-color-theme-color" aria-label="Bekijk prijzen en beschikbaarheid"><span class="avia_button_icon avia_button_icon_left avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="calendar" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="29" height="32" viewBox="0 0 29 32" preserveAspectRatio="xMidYMid meet" aria-labelledby="av-svg-title-5" aria-describedby="av-svg-desc-5" role="graphics-symbol"> <title id="av-svg-title-5">Calendar</title> <desc id="av-svg-desc-5">Calendar</desc> <path d="M25.6 4.8q1.344 0 2.272 0.928t0.928 2.272v19.2q0 1.28-0.928 2.24t-2.272 0.96h-22.4q-1.28 0-2.24-0.96t-0.96-2.24v-19.2q0-1.344 0.96-2.272t2.24-0.928h1.472v3.2h5.12v-3.2h9.28v3.2h5.12v-3.2h1.408zM25.6 27.2v-12.8h-22.4v12.8h22.4zM8.32 1.6v5.44h-2.24v-5.44h2.24zM22.72 1.6v5.44h-2.24v-5.44h2.24z"></path> </svg></span><span class="avia_iconbox_title">Bekijk prijzen en beschikbaarheid</span><span class="avia_button_background avia-button avia-button-fullwidth avia-color-theme-color-highlight"></span></a></div>The GTM trigger is not triggered.
Ismael, managed to fix it. Thought I share the solution here.
Create a custom DataLayer Variable based on the gtm.element.parentElement.className
Check if the DataLayer Variable is filled when clicking with GTM or Developer Tools
Create Custom Event with contains the CSS class name
And check if the matchin works with GTM Tag Assistant
- You must be logged in to reply to this topic.