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.
Related
I have the following button, for which I want to create a Google Tag Manager trigger (but I seem to be unable to do so):
<div class="class-a class-b">
<form class="class-c" action="https://www.example.com/test" method="get" onclick="window.open(this.action); return false;">
<button type="submit">Open now</button>
</form>
</div>
Which type of trigger should I use (the auto-event variable does not
work)?
How would I need to configure the trigger to track a button
click?
What would I need to do in order to also catch the action
value (i.e. the URL https://www.example.com/test)? Would I need Javascript for that to bind to its submit? If so, how?
You want to use the Any Click: All Elements.
In the trigger, you enable the "Some clicks" Then Click Element -> Matches CSS Selector -> button[type="submit"]
Optionally, you can add more conditions there.
Use this trigger in a new Tag. Use the Universal Analytics as a tag type.
Tag settings: change it from Pageview to Event. Now you have three fields for Category, Action and Label of your event.
Then you want to set your Action as a URL. Start typing {{ in that field and pick the variable to populate there like so:
That should be it.
Update to address the actual html given:
So just return this value in your CJS var:
{{Click Element}}.parentElement.getAttribute("action");
It should work for the exact html situation that you've provided.
Then use this CJS in your tag and you should be good.
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/>
According to Create.js' integration guide, it should be possible to create editable collections of blocks.
Relationships between entities allow you to communicate structured
content to Create.js, which will turn them into Backbone collections.
For example, to annotate a list of blog posts:
<div about="http://example.net/blog/" rel="dcTerms:hasPart">
<div about="http://example.net/my-post">...</div>
<div about="http://example.net/second-post">...</div>
</div>
This dcTerms:hasPart doesn't seem to be present explicitly in Create.js; it's probably from a vocabulary. How can one show to Create.js that this content is a collection and make it show the "Add" button? In my case, I simply have sections which contain <h2>, <h3> and <article>s.
EDIT: Using rel="hasPart" in my <section>, the button appears. Problem is Create always uses the first element as a template. In this case, it uses my <h2> as template, which is not what I intended. So my question now would be how to trigger the "add" event in my section?
Hackish solution:
Using javascript, I created a new section or article in the DOM, then restarted Create calling $('body').midgardCreate({...}) again. Create will now recognize the new block. When I edit some fields in the block, the "Save" button is enabled and I can submit the new block.
Hi there RactiveJS users, I'm new here and I'm very excited using RactiveJS but, I came up to wonder if I can update the template / data inside a Ractive instance .
I have the following modal window:
<div id="modal" intro-outro="fade:100">
<div id="content">{{>content}}</div>
</div>
And >content is a ranking template. Imaging that clicking on a player will need to overwrite the ranking with the playerProfile template and it's requested data. Is there another way this could be done aside teardown and then reinitialise the modal window with the playerProfile template ?
UPDATE
I forgot to mention that the window will wrap around 20 templates at the moment (which will grow in the future as the game gets more complex). The window I am talking about is the main modal window that shows every template that user triggers, like rankings, mails, reports, tribes, map etc.
Regards.
WORKAROUND
Marty's answer is correct but I'd rather not complicate myself and just create new instances of Ractive inside the #content div than create different instances of the whole modal window which will be shown on init and hidden on teardown.
If you just have two states (as opposed to open-ended dynamism), you can block them conditionally:
<div id="modal" intro-outro="fade:100">
<div id="content">
{{^selected}}{{>partial1}}{{/}}
{{#selected}}{{>partial2}}{{/}}
</div>
</div>
You can augment the data model after initial render. Supposed you had a player click handler:
ractive.on('playerSelected', function(e){
//however your data works...
$.get('/player?id=' + e.context.id, function(data){
ractive.set(e.keypath + '.player', data.player)
ractive.set(e.keypath + '.selected', true)
})
})
If you need a more dynamic approach, you can use a component to set the partial dynamically. Here's an example (http://jsfiddle.net/9Vja5/2/) of how you can do it in 4.0 (4.1 will offer a few improvements in this area). Use a component in the main template:
<div>
{{#reset}}
<dynamicPartial partial='{{partial}}'/>
{{/}}
</div>
Then set the template to the supplied partial in the component beforeInit:
Ractive.components.dynamicPartial = Ractive.extend({
beforeInit: function(o){
o.template = '{{>' + o.data.partial + '}}'
}
})
The partials need to either be defined globally, or on the dynamic component.
I'm using a partial because that's what you had in your question. You could set the template directly if you had a list of which template to assign. Or you could also set the template to a component via '<' + component + '/>'.
The reset is a bit of a hack to force Ractive to re-render the component:
r.observe('partial', function(){
r.set('reset', false)
r.set('reset', true)
})
Otherwise it would just change the data in same component instance, which wouldn't get it to recreate and assign a new template.
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...