I'm making an element visibility tag in tag manager, this bit appears regardless if the form was submitted or not
<div class="et-pb-contact-message">
after a form has been submitted it changes to
<div class="et-pb-contact-message">
<p>Thanks for contacting us</p></div>
I've attached a screenshot of the tag
Related
I'm using Google Tag Manager to send an event to Google Analytics when you click an <a> or a<button> tag, which works fine.
However I also have an <a> tag wrapping an <img> and the event is not firing because the element getting clicked is not the <a> tag, it's the <img> tag.
I've tried to move my .sau-btn to the <img> tag but this doe not work either. I've also tried to move my a tag to act as a hotspot on top of it.
<v-img :src="require('#/assets/img/sales-banner-enterprise.jpg')" class="gtm-btn" data-gtm-category="Sales Offer" data-gtm-action="Test Link" data-gtm-label="Image Real Link One" alt="alt tag"></v-img>
How get I get my event to fire when you click anything inside of the class that it is holding?
If you're looking for the parent anchor tag to not capture the event down to the image tag, you can call event.stopPropagation() on it.
By default, events do get to the most nested element through the capturing phase. Here is a link to the API :
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
In Google Tag Manager, I set it up to track some data from clicks on elements that contain a certain class and record an event in Google Analytics. It seems to work just fine for text links, but I run into problems if there is another tag inside the link for an image, icon, etc. For example, the following would work fine:
Click here
But this won't work:
<a href="link.html" class="track_this" data-tracking-info="my info">
<span class="icon click-here"></span>
</a>
And something like this will work if you click on the text, but not if you click on the icon:
<a href="link.html" class="track_this" data-tracking-info="my info">
<span class="icon click-here"></span> Click Here
</a>
I know that I could add the "track_this" class into the span for the icon, but it gets REALLY messy in more complicated scenarios. Like imagine having a thumbnail image with an icon and some text below it all wrapped into one a tag. I'd have to put that class and the tracking info on the image tag, the span for the icon, the div for the text, etc.
Is there a better way to do this? Thanks!
I could speak more definitively on this if I could see how your GTM was setup, but my guess is that you are using an "All Elements" trigger to capture these link clicks, and filtering on "Click Classes" or "Click Element". The issue with this is that, when the link tag (<a></a>) contains another element, such as a <span>, even though that triggers your link to open, the element that GTM records as receiving the click is the span, not the link.
If you want to fix this, there are two options, either of which should work.
The first is to switch to using a "Click - Just Links" trigger type, and filter on the class "track_this". For this trigger, GTM lets click events "bubble" up until they hit a link element, and then it tests your trigger against that link, instead of the element that was clicked on. Simply using this trigger type should work for all three of your samples.
The other option is to use a more advanced filter with the "Click - All Elements" trigger. If you modify the trigger so it fires on "Some Clicks", and then make the condition that "Click Element matches CSS selector:"
.track_this, .track_this *
then it will register a click on any element that has the track_this class, as well as a click on any element inside those elements.
This problem can also be solved using a little bit of javascript and a 'User-Defined Variable' in Tag Manger. This solution is for handling more complex UI components.
Explanation
Google Analytics + Tag Manger record the very specific Element or Node that is clicked by the user. That element is stored in GA as a "Click Element" variable. So in more complex UI situations it is possible the user could click on multiple elements for a single action to occur. For example. Here is a button with an icon and text.
<div
class="button"
id="PARENT_ID"
onClick = () => ...
>
<span id="CHILD_ONE">
icon
</span>
<span id="CHILD_TWO">
text
</span>
</div>
In this scenario it is possible for the user to click on any of the three id's above. All three will activate the onClick action. However, Google Analytics doesn't care about the onClick. It only cares about what specific element was clicked. IE: PARENT_ID, CHILD_ONE or CHILD_TWO.
The "User-Defined Variable" Solution.
In Tag Manager go to the 'Variables'. (Left column menu.)
Add a new 'User-Defined Variable'.
Select the variable type as 'Custom JavaScript'.
Add:
function() {
if ({{Click Element}}.id != "") {
return {{Click Element}}.id;
}
if ({{Click Element}}.parentNode.id != "") {
return {{Click Element}}.parentNode.id;
}
if ({{Click Element}}.parentNode.parentNode.id != "") {
return {{Click Element}}.parentNode.parentNode.id;
}
return {{Click Element}}.parentNode.parentNode.parentNode.id;
}
This script will search the DOM up three levels up from any child Element (Node) and look for a matching Tag id.
NOTE: Click Element is the variable name used by Google Analytics. It's the gtm.element the user clicked.
Setup Tag Manager Configuration to use your new 'Custom Variable'.
Now use the parent id for setting up your Triggers. In my example PARENT_ID will be the returned id even if a user clicks on CHILD_ONE or CHILD_TWO. So select 'contains' PARENT_ID.
------ Further Considerations -----
This solution only works within three parent levels. Also while unlikely it is possible to capture an element out of scope of what is intended.
In more complex UI components it might be preferable to add the Tag id's to every Element. If you are using a front end framework like React I would suggest making the Tag Id a dynamic prop and add it to all child components.
NOTE: Google Analytics changes often. This is a GA4 + Tag Manager solution.
style use pointer-events:none can't tracking by inside.
<a>
<svg id="gtm-track">
<rect style="pointer-events:none"> .... <rect/>
<path style="pointer-events:none"> .... <path/>
<svg/>
<a/>
I need to generate events each time a user clicks on any of the slides of the banner of the home page of this site:
https://www.lacuracao.pe/
I've asked a developer to put ids to each slide, in order to make it easier to track each banner separatly as an event when its clicked.
My click trigger is set to fire on slide with id="banner-home-01", but the tag won't fire. This is the last slide, not the first one as one would expect.
Could it be that it's inside another divs? (even using the id attribute to target it's clicks?)
My clicks listeners and linkclick listeners are working:
My trigger:
My tag:
HTML:
<div width="100%" class="banner-slider-18 body-banner-01" id="banner-home-01">
<a href="/curacao/celulares-lc"><div width="100%" class="fondo">
<!--<div>
<div class="linkeo">
<a href="/curacao/tv-samsung-ultra-hd-smart-55-un-55nu7090g-un-55nu7090g-p">
<button>compra</button>
</a>
</div>
<div class="linkeo">
<a href="/curacao/tv-samsung-ultra-hd-smart-55-un-55nu7090g-un-55nu7090g-p">
<button>compra</button>
</a>
</div>
</div>-->
</div></a>
</div>
UPDATE 1:
The tag appears in the Debugger Summary as not fired, and when clicked it shows:
This is an image of the details, but It doesn't show why it didn't fire:
if you look in the debugger at the event gtm.linkClick and look at the variables you can see that the variable is an emtpy string, thats why your tag isn't firing. Your developer needs to add an id to the link itself, so the Click ID will be filled (see screenshot with the id test). After that the Click ID field will be filled with the id.
Another tip for you if you want to see why a tag isn't firing you have to select the event you want to inspect on the left side, for example a click and then click on the tag that wasn't firing. If you scroll down to Firing Triggers, you see what condition hasn't been fulfilled.
Using the source code below, I need to track text values of clicked links.
How can I track this and whether page load rule or event based rule is beneficiary for it?
How to code this using dtm?
<div class="afgfj">
<section class="asked-questions">
<div class="g-bp-row-gutter p-comp-spacinottom p-rb">
<h2 class="p-heading-02 p-component-title">
Frequently Asked Questions
</h2>
<dl class="p-faq-main p-accordion"
data-ctn="S9031/26">
<dt class="p-top-10 p-faq-chapter p-active">
<span class="p-top-10-global">Top-10 FAQs</span>
<span class="p-top-10-local">Top 10 FAQs</span>
</dt>
<dd class="p-top-10 p-faq-list p-active">
<ul class="p-bullets">
<li class="p-faq-item" data-lang="ENG">
<div class="p-magnific-popup-launcher" data-comp-id="magnificPopupLauncher"
data-type="iframe"
data-title="Frequently asked questions"
data-close-label="Back"
data-href="//www.org.com/cgi-bin/oleeview?view=aa12_view_body.html&dct=QAD&refnr=0073544&slg=ENG&scy=GB&ctn=S9031/26">
How long does it take to get?
</div>
</li>
<li class="p-faq-item" data-lang="ENG">
<div class="p-magnific-popup-launcher" data-comp-id="magnificPopupLauncher"
data-type="iframe"
data-title="Frequently asked questions"
data-close-label="Back"
data-href="//www.org.com/cgi-bin/oleeview?view=aa12_view_body.html&dct=QAD&refnr=0020591&slg=ENG&scy=GB&ctn=S9031/26">
Can I recharge the appliance?
</div>
</li>
This is a perfect time to use an Event Based Rule. You'll also need to create a data element to hold the text value.
The main obstacle that I can see from your code would be identifying the A tag correctly.
First the Data Element: in DTM Rules, within Data Elements click Create New Data Element.
Enter a name, specify the type (CSS Selector seems the most appropriate here) then within the CSS Selector Chain list state how to reach it. My guess is for your code it would be "div.p-magnific-popup-launcher a" but you would need to test this. You can tell by opening a Inspect Element (F12) in Chrome or similar debugging gadget. There's a good blog about doing this from Adobe here.
You should also specify which part of the A tag to save. From your question you I believe you need 'text' which would capture items like "How long does it take to get?"
Under Event Based Rules within DTM click Create New Rule.
When you're happy with the settings on this page click Save Data Element.
Populate your name, and category if applicable. The Event Type should already be set to 'click'.
Within Tag you then have to set how to find the A tag through CSS, similar to above.
That's the basics, but you'll also need to set Criteria (what pages this should fire on). Furthermore, under the Adobe Analytics section you should set whether a pageview is incremented or not, and which eVars, Props and Events are populated as a result of the click. This is also where you can use the value from your Data Element. Under Link Tracking, choose Custom Link. Within Link Name, enter a percent sign (%) and your data elements should appear. Use the name you specified earlier.
Note: you should match up your populated eVars and Events etc. with your settings under Report Suites in the Analytics interface.
I am assuming you are attempting to get the text of an <a> element when it is clicked on.
Such as in the one below, you would want to get "How long does it take to get?":
How long does it take to get?
To do this, create an event based rule with the event type "click", set the element tag to "a". (See image below)
Next you will want to configure the Adobe Analytics section of the rule.
You will set the Tracking to s.tl() ,since you do not want to create a pageview when someone clicks the link (the page they view should already do that).
Then set an eVar and/or Prop to %this.text%. This is DTM notation to grab the text of the element that triggered the rule to fire.
Finally, set an event to trigger on this rule.
See image below for the configuration
This should track when an <a> element is clicked and store the text in an eVar
My page has a list of links, with some associated information.
eg. Something along the lines of
<div class="listOfThings">
<div class="Thing"> <a link here/> <specific thing A info here/> </div>
<div class="Thing"> <a link here/> <specific thing B info here/> </div>
<div class="Thing"> <a link here/> <specific thing C info here/> </div>
</div>
In DTM, I want to be able to track a click on to any of those inner "Thing" divs, extract which thing was clicked, and pass that info to Google Analytics. I can get the click selector working fine, but I want to know how to extract the additional information on the click.
This would be done inside of an Event Based rule. See image: http://imgur.com/BQv0HdC
Event Type: Click
In the element tag or selector: div.things a
This is saying I want to track all click on any anchor tag inside a div with the class name of "things"
Then once you have done that you can reference the "this" scope. You have use %% as a notation within the form fields for the GA code. so %this.text% would pull in the text of the specific link selected: %this.innnerHTML%, %this.href% etc...