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...
Related
I'm trying to track all outbound links that contains the target=_blank, and after many hours of testing I realized that each click variables (in the debug mode) seems to be empty. I guess this is because there's a span element within the anchor. On some clicks the variables contain the full URL and attributes etc, but most of the time they don't - and there doesn't seem to be any constistency in this behavior.
Does anyone have any idea what's wrong here? Thanks!
DOM for the link:
<div class="elementor-button-wrapper">
<a href="#" class="elementor-button-link elementor-button elementor-size-sm" target="_blank" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Se priset</span>
</span>
</a>
</div>
The problem is, that you are using click trigger for all elements, which captures the exact element clicked, which is the span.elementor-button-text
You should use just "Click - Just links" type of trigger, and specify the links you would like to track. This will ensure, that the clicked element is the a tag, regardless of its child elements, that can get clicked.
You can set your trigger to capture only links with target=_blank attribute as {{Click Element}} matches CSS selector a[target="_blank"]
E.g.
EDIT:
Based on your relevant code part, the Link Click event should look like this:
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.
When presented with the following structure...
<a id="link-flickr-vs-team" href="https://www.flickr.com/photos/...">
<img src="images/gallery1.jpg" alt="thumb">
<i class="fa fa-camera-retro" aria-hidden="true"></i>
Descriptive text here
</a>
How do I set up my trigger to account for the click on the image or text. Right now I can't seem to get it to register on the image. My current trigger settings are...
Click - All Elements
Some Clicks
Click Element, matches CSS selector, a*
... and my Tag Configuration is...
UA Google Analytics
Track Type: Event
Category: Flickr
Action: Click
Label: {{Click Element}}
Etc...
The event label returns [object HTMLImageElement] but I need it to return the id from the <a> but using Click ID returns (not set) when click the image, only the text.
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
I'm new to GTM and am trying to capture "next" and "prev" events on multiple carousels throughout my site.
My HTML.
<div id="hero1">
//... slides
<div class="slide-next"></div>
<div class="slide-prev"></div>
</div>
<div id="hero2">
//... slides
<div class="slide-next"></div>
<div class="slide-prev"></div>
</div>
Anytime I click a div with class slide-next (and also slide-prev), I'd like to capture the following:
Category: Carousel button
Action: Click - Next (or prev)
Label: Hero1
Is there a way to do this in Google Tag Manager?
Create a new Data Layer Variable macro with gtm.element.parentElement.id as Variable Name.
Create another Data Layer Variable macro with gtm.element.className as Variable Name.
Create a new rule where event equals gtm.linkClick and your previously created macro -first one- starts with hero
Create a new UA Tag, Type: Event, Category: Carousel, Action: macro with gtm.element.className, Label: macro with gtm.element.parentElement.id. Use the previous rule to fire this tag.
Of course, you will need also a click listener tag.