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.
Here are the steps and how to do it.
1. Create a Custom JavaScript Variable;
Here is the Screenshot
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:
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.
Related
I'm using an Element Visibility trigger to track a value that appears on a page. However, I want to track this value even when the user doesn't scroll to the area of the page where the element is (i.e. when the page is loaded, and the value is displayed below the fold, but the user doesn't scroll down there). Is there a way of doing this?
Suppose that you want to track a value when a certain element is present on the DOM but not depending on the visibility, then there is a 4-steps-way to do it as follows:
Assumption: you know the class or id of the element you are looking for. In the
following example, I will use a class because it allows me to report not just one but a collection of elements being part of the DOM.
We can create a trigger to detect every page visited, without any limitations due to the element we want to track could be everywhere.
Then, we can create a TAGS (called "SCRIPT detect element" on the example) of the type "Custom HTML".
Triggering will be the trigger created in step 1.
Knowing the class of the element we want to track, the script to write will be:
<script>
window.dataLayer = window.dataLayer || [];
// get all elements with a given class name
var els = document.getElementsByClassName("classname-to-look-for");
Array.prototype.forEach.call(els, function(el) {
var evtElementPresent = {
'event': 'wantedElementRendered'
}
// push event per each element.
window.dataLayer.push(evtElementPresent);
});
</script>
At this point, we will be reporting events (with event name = "wantedElementRendered") from the website to the TAG MANAGER every time an element with the classname equals to classname-to-look-for is part of the DOM, despite if it is in the viewport or not.
Now, with that in mind, we need to create a new trigger on TAG MANAGER. This time the type of the trigger will be "Custom Event" and we will make this trigger happen only if the event name is wantedElementRendered.
Final step: Let's create a tag that will create a GA4 event reporting it to google analytics.
Tag name: "Report X Element is present"
Type: "Google Analytics: GA4 Event"
Event Name: the name we want to declare on analitycs, eg: "X-Element-Present".
Triggering: will be the trigger created on step 3 -> "X Element Rendered".
Now, let's take a look how it works:
Final notes:
What if we want to track the presence of a lot of elements on the page without taking into account the visibility of each one, but also taking care of each element representing different things, like products?
Then, we can send to Google Analytics not just an event name each time an element is part of the DOM, but an event parameter as well, with the product ID. This will allow us to create reports in analytics, asking not only how many times a product appears as part of pages, but to refine the question: "How many times X product appears across pages?".
Altering steps 1-4 to contemplate events attributes, that can be done in a beautiful way. If anyone is interested, I am open to sharing this alternative as well.
I'm trying to tweak the WordPress plugin https://github.com/algolia/algoliasearch-wordpress to suit our needs. What we want to be able to do is have a search result that will load the data up in the same page.
I have my WordPress posts and its data being indexed successfully. I have added a search box to the page, and autocomplete is being fired.
Out of the box, the WordPress plugin template wraps the result in an anchor tag and assigns it the URL of the found result. When clicked, this navigates you to that post. However, what I want to do is intercept that click and load the result in the same page without navigating away.
I have removed the href from the anchor. I have also edited the supplied autocomplete.php template where the call to autocomplete:selected occurs. In there I have removed the call to navigate away by removing window.location.href.
Now I have two main issues.
1 - When the user clicks the search result I would like the input to be populate with the title of the item they clicked on. I added this in the autocomplete:selected callback by adding $searchInput[0].value = suggestion.post_title. Which seems to change the value of the input correctly, but as soon as I click away from the input, it is re-set back to the original typed value. So if I type 'may' and click the result 'mayonnaise', the result data can be accessed but the input returns back to 'may'. My function looks this:
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
console.log(suggestion);
autocomplete.autocomplete.close();
});
2 - It seems that the autocomplete dropdown does not hide when the user clicks away. To resolve this i've had to use what I think is a bit of a nasty hack with jQuery. I was wondering if this is really required? My code just below the autocomplete:selected call looks like this:
jQuery('body').on("click", function(event){
if (!jQuery(event.target).closest($searchInput[0]).length) {
autocomplete.autocomplete.close();
}
});
Found some answers to my questions.
1 - In order to populate the input with the title of the selected search result I added a call to the setVal method of the autocomplete object. I'[m still not sure why this is required.
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
autocomplete.autocomplete.setVal(suggestion.post_title);
});
2 - It looks like the config of the autocomplete object uses the value of WP_DEBUG in order to set the debug value. The options available for the autocomplete component can be found here https://github.com/algolia/autocomplete.js#options. This lead me to find that when debug is set to true, the autocomplete box does not hide on selection. This is to allow for easier debugging and styling of the component.
I'm using Polymer and I am encountering a Problem. I think there is a good solution, but I still don't have the perfect understanding of polymer.
In my template I get a dom-repeat which gets me some _itemsas item. item.name returns the name of the item, it works just fine. Now I want to use this name to display it in a tooltip, so I call the function on-mouseenter="_showTooltip".
My function looks like this:
_showTooltip: function(e) {
var item = Polymer.dom(e).rootTarget;
//........here I get Information out of my item to use it in my tooltip and display it
}
How can I transfer the information of my original item to this function?
Thanks in advance!
You did not mention or tag which version of Polymer you're using so I will point you to the docs for Polymer 2 because that's what I use, but I am guessing something similar must exist for Polymer 3 also.
Any event triggered from elements rendered inside a dom-repeat will get a model key added, under which you will have the context, so you will have your item from HTML there.
You can see that in the docs here.
To start you can try to:
_showTooltip: function(e) {
var item = Polymer.dom(e).rootTarget;
//........here I get Information out of my item to use it in my tooltip and display it
console.log(e.model); debugger;
}
and continue from there..
How do I configure the rules in Google Tag Manager if I want to restrict the Click-Events to just an element and its subelement?
I've found https://support.google.com/tagmanager/answer/3420054?hl=en#ClicksOnLinks
But I can't see how I setup a rule to restrict the events.
Easiest way is propably to assign a class name or an id to the element. This will be accessible trough the element classes or element id macro (those macros will be set up automatically by GTM). You can then create a rule "fire where event equals gtm.click and element.classes contains myclass".
Jerry, create an click listener according to the manual you linked.
Then, to track all click on elements and its subelements, custom macro and a bit of jQuery is probably the best way to go. Consider this Custom JS macro that would return 'nav' string if a clicked element has an ancestor with the ID nav.
function() {
var el = {{element}};
while (el && el !== document.body && el.id !== 'nav') {
el = el.parentElement;
}
return el.id === 'nav';
}
I have seen this on Google Product Forum, but I couldn't find the post itself. To give a proper credit though, it was posted by Brian Kuhn (Tech Lead for GTM).
Using these two macro-based rules should then do the trick:
{{event}} equals gtm.Click
{{element id}} contains nav
Hope this helps!
I am wondering if there is a way that I can get the current element that is triggering the onBeforeChangeEvent function in jsViews. I want to get the current element that it is working on, to do some extra jQuery work on it.
A basic example is below:
$.views.helpers({
onAfterChange: function (ev)
{
//want to get element instance right here as an example.....
if (!PageSettings.cancelUpsert && ev.type == "change")
{
//do somthing to element that is currently being processed.
}
}
});
I searched through the objects being returned, but could find a stable way to get to the element. Any ideas, or tips towards where to look would greatly be appreciated. Thanks!
If you are looking for a data-linked element, such as an input: <input data-link="..." />, whose change event triggered the change, you can get that from either this.linkCtx.elem or ev.target.
More generally, the this pointer is the view object that is being changed.
There are a number of helper methods on the view object that you can use to access different elements within that view. For example this.contents("someSelector") will return a jQuery object that selects top-level elements in that view, and this.contents(true, "someSelector") will apply the selector to filter on all elements in the view (deep search not just top-level).
(You can use the selector "*" to get all elements)