I'm wracking my head here. Slider works, that's not the issue. I've been ask to add event tracking to the arrow. So not on a slide change as the KPI is which arrow. So did the user click left or right.
This does't work:
$('.slick-arrow').on('click', function () {
var $this = $(this),
$ariaLabel = $this.attr('aria-label');
console.log('button');
});
The arrows are default, though I changed the css. Is there another way to track arrow clicks?
I think this will help you track your button.
In GTM, create a user-defined variable of "auto-event variable" type and value would be the "aria-label" attribute like so:
Then create a trigger for the arrow clicks, you already have the right idea for targetting the element using the CSS classes, but this can be done in GTM, like so:
Note, if you don't see the "Click XXXX" variables, you can enable them under the "built-in variables" section in the variables screen.
Next create the event tag, you'll go to the tags page and create a new tag of type Google Analytics, then pick "event" for track type and fill in the category, action and label as you wish. Note, here I'm using the variable we created in the first step as the label, but you can put it anywhere to identify what kind of arrow it was. Make sure to also pick the trigger we created earlier as the trigger for this tag as well.
After this is all done, put the container in debug mode and you should see the tag fire and register an event in GA.
Related
The case:
I have Activities as datamodel.
I have set Activities to have many-to-many relationship with themselves to represent a Parent / Child relationship.
I have set up an accordion widget. Each row of the accordion contain basic data about the Activity record + some buttons.
I have set one of the button's onClick functions to open a popup, which allows me to edit the Activity detail in a form.
When I click a different record from the same accordion, the form from the popup reflects the data in the selected record.
The problem:
I have nested accordions which represent the "Child" Activities of the Parent Activity.
I have also added a similar button, which opens a popup. I can open the popup, which targets the child records, but cannot make it open the specific record, from which I pressed the button.
So the popup open by default on the first child.
Please help - how can I make the popup change naturally to reflect the datasource / selected record of even nested datasources?
What I tried:
In order to try and make to popup work I have tried to set the datasource based on the relationship:
Activities: Sub_Activities(relation)
This works to the extent of showing the related items, but popup content does not dynamically change on clicking a different child record or clicking the button from a different child record.
In both cases what is shown is the first child record.
What I understand is that you have a set up in which you click a button and a popup shows. The popup should let you view/edit the record referenced in the row where the button is. If that is the case, then probably you already have almost everything setup for the next thing to work. First, add a string custom property to the popup and name it selectedKey. Then, on the onClick event of the button that opens the popup, add something like this:
var key = widget.datasource.item._key;
app.popups.MYPOPUP.properties.selectedKey = key;
app.popups.MYPOPUP.visible = true;
Now, go to the popup content and add the following on the onAttach event handler:
var key = widget.root.properties.selectedKey;
widget.datasource.selectKey(key);
This is the general idea of how to make it work; However, in order for it to work, your datsources in the widgets should be properly set up. Good luck!
I'm fairly new to Google Tag Manager and am trying to set up my first custom event.
In my html I have, in the very top of my head:
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({"event": "testEvent"});
</script>
And in Google Tag Manager, I've created a trigger that uses my "testEvent":
Additionally, I've created a tag that uses this custom event:
Lastly, when I debug I see that both my custom event and tag show up:
However, when I click on the DOM element that is supposed to trigger that custom event, nothing happens.
I have tried swapping out my custom event trigger for just the built-in click trigger and that works fine, so that tells me that I have my tag itself set up correctly.
Am I missing a step? Is there something more I need to do to make a custom event work? Like I said, I know I could use a regular click trigger in this test case, but in my actual project, I cannot just use the regular click trigger.
Thanks for any help you can offer!
it is a configuration issue. If I understand correctly, you're trying to trigger an event tag when someone clicks on an element with a specific css class.
To achieve this, you will need to:
Go to the "Variables" screen in GTM. On the top portion of the screen, there is the "Built-in Variables" section. Click on the "CONFIGURE" button, a side menu should pop up. Look for the "Click Classes" under the "Clicks" section. Check the checkbox beside "Click Classes", close this menu, should show now see the "Click Classes" variable name under "Built-in Variables".
Go to the "Triggers" screen in GTM. Create a new trigger of the type "All Elements" under the "Click" section. When the configuration for this trigger comes up, select "Some Clicks" under "This trigger fires on". You should see 3 input fields come up for the condition of this trigger. In the first select box, you should see "Click Classes" as one of the available selections, pick that. In the next box, select the appropriate comparison type, we will choose "equals" in this case. In the last input box, put in "search__input" or the name of the css class you want to trigger on.
Go back to the "Tags" screen in GTM. Add this trigger to the tag you want and voila!
If your custom event is pushed only for "search_input" clicks, then you can the modify your trigger to "All Custom Events"
else as #GTMGuy said you need to push the event on "search_input" click event.During event trigger in GTM preview, click on the event and check the value of Variables - "Click element" whether it matches your trigger condition.
You need to add the element clicks using JQuery or any other language, as well as change the trigger to fire on "All Custom Events"
for example say I have a chat button
<script>
var dataLayer = dataLayer || [];
$('.chatBtn').click(function (e) {
dataLayer.push({
'event': 'chat-click'
});
});
</script>
The event should be on that particular element click .
Looking at your custom event it is not attached to any element click
I want to trigger a tag when a link with a certain css class is clicked. I create a trigger based on Clicks > Just Links, but when I go to select the variable, I just get "Page Hostname, Page Path, Page URL, Referrer, New Variable"... no "Click Class" as one would expect.
All the online help shows an outdated version of GTM that don't match the options I see. Even the GTM help docs are outdated.
How does one trigger by css class? (I tried using a custom variable, but didn't work either, and honestly the options didn't make much sense either).
Update: It works if I create a new custom variable "DOM Element has CSS selector" and then go to Trigger, select my custom variable, select "Equals" and enter the text of the link.
But this doesn't make much sense to me, all I want is trigger based on css class, not by the text contents of the tag.
Turns out GTM's "Click Element" built in variable (and many others) is off by default, that's why it was missing from the trigger dropdown. One has to go to Built In Variables > Configure > and tick the "Click Element" variable.
Why would they turn this off by default and offer no clues in the UI, I have no idea.
I would like to track how many people click on a link in the menu bar and where did they come from. Is there a way to do it? I see that in Wordpress there is a class called menu-item, but I don't know how this would help me.
Thanks in advance.
Google Analytics will track where users come from by default. Because of this, you only need to create an event to fire on the click class: menu-item.
After setting up event tracking, navigate to Behaviour -> Events -> Top Events. Once at this page, search for the naming of the event you created, and then select a secondary dimension such as Default Channel Grouping, Source/Medium, or whatever is relevant to your needs.
1) You need to create universal event tag. In fields to set, choose variable refferer and as value select {{refferer}}.
2) Create "click classes" variable with value: gtm.elementClasses
3) Create trigger of "Click - All Elements" type. Select "some clicks" and fill it with: {{click classes}} equals menu-item.
I'm having a little trouble controlling the visual display of my filtering tabs and pagination links using Isotope. I want to fix two issues:
1 How do I class one of my filtering tabs so it looks already selected on page load?
2 When I click on a pagination link in the container, the currently selected tab is declassed, meaning it no longer looks selected?
Please see the demo here andym.ca/designs/isotope/tester4.html and you will understand what I mean.
Regarding the first question; before the code of your Isotope logic proper, you could have this anonymous self-executing function to preset certain things
(function(){
var selector = $('.classtobefilteredoutonload');
$container.isotope({ filter: selector });
// other things that shall happen too go here, like assigning the right class to you PMTV tab div
return false;
})();
Or failing that, leverage hash history to preset your site.
Regarding the second question, it looks like you're using this CngClass function to toggle the focus for all your clickable "a" elements, so naturally Archive Videos will lose focus when you click on a pagination "a" element. You can see it well in Google Chrome's developer tools while clicking on your tabs and paginators.
Well, you should toggle a "highlighting class" on your pagination separately, with a different function from the one that toggles your tabs. An anonymous self-executing function executes as soon as it is encountered, so it looks like the rest of your DOM is not ready. Try the same function but with on document ready.
You can do it like this.
You can pre-mark your tab or whatever item on screen like this