Trouble with Google Tag Manager (GTM) New Event Listener Tags - javascript-events

I'm very excited about GTM introducing the Event Listener tag options, and have used them with success on some websites. With several of my company's clients, however, I am having this strange issue.
I can see, using the debugger software that the Link Click Listener tag is firing, and I can see that the Record Event tag is firing. However the Events never show up in Analytics.
Any advice?
Thanks in advance!
Becky

Even with the Link Click Listener and the Event Listener firing, you still need to add an additional Google Analytics tag OR Universal Analytics tag to utilize them within GTM. Remember, the only thing the listeners do is create new dataLayers for you to use.
To make events work in Analytics, add a NEW Google Analytics (or UA) tag to GTM.
Select the Track type as 'Event'
Category: Whatever you'd like the category to be (you can use macros here as well)
Action: Whatever the action is, download, click, etc. (macros are helpful here too!)
Label: Whatever you'd like it to be.
The key here is how you setup the rules. Your {{event}} needs to utilize the dataLayer - gtm.click, then you need to specify an element you'd like to track.
For a fantastic tutorial, I recommend - http://cutroni.com/blog/2013/10/07/auto-event-tracking-with-google-tag-manager/

Related

GA4 event for form input

I want to create event to track form input in my website form. For example someone types in name section, phone sectio or email I want to see that as event in my GA4 account. But I couldn't manage to create triger and event from tag manager. Any tips guys?
I created additional variables threw tag manager. But couldn't create trigger.
GTM's best practices advice not to do so-called DOM scraping. The proper solution here would be you asking your front-end developers to push dataLayer events for which you would be listening from GTM. This way, when things change on the front-end, the developers can effortlessly move the tracking to a new form, or a new field.
In some cases, inferior tracking methods must be used, however. In this case, you would want to deploy a custom HTML, which would be a <script> tag in your DOM deploying event listeners on form field interactions. The callbacks of the listeners would deploy dataLayer events with payloads containing whatever else you need to know about the interactions.
After you deploy the listeners and confirm that the callbacks work as you want, you make custom event triggers, indicating your event names from the dataLayer pushes. You can make dataLayer Variables to declare used datapoints in the DL events and use the new variables in your tags.

Google Analytics: Event does not appear are being set up

Bear with me, because I'm relatively new to using GA and the people who set it up have either left or don't know how to use it. So there could be a deeper problem...
I'm trying to add an event via GTM, but it doesn't appear in my event list on GA. Everything, so far as I can tell, is set up correctly.
Do events not appear until they've been triggered? The product gets deployed to customers on a set-basis so there'll be a delay before the trigger is in the product
I chose the trigger as Click Classes and just added a class to the button. Is this enough to trigger the event?
Generally, you set up event tags in GTM that fires after a condition (like your Click Class) is triggered. Only after then, the event will get sent to Google Analytics and appear in your Events and Realtime reports.

Issue with GTM and asp.net webforms with two submit buttons

Just wanted to share a discovery when using Google Tag Manager (GTM) and two submit buttons in a form-tag (common legacy asp.net Webforms tech).
GTM is used by website editors. So the developers doesnt need to be involved when other scripts or event needs to be implemented or traced.
The problem is that something in GTM is making our form to always trigger the default submit button (the first in order is default).
Example problem/how to reproduce: in a wizard scenario, with back and next submit buttons, which are triggering a postback. Click on next is triggering the back button.
Removing the GTM code, and it works.
This is a legacy site. Maybe a legacy issue, but the site worked until we implemented GTM.
You may ask me now, what components are we using in GTM. Well google analytics is one, then i don't know.
Regards.
Work-around solution: I had to rebuild the HTML to NOT use "input type=submit".
Instead use buttons without submit behavior. eg not use "postbacks" on one of the buttons.
Probably something for the GTM team to look at or inform.

Foundation 4 Section (accordion) Events

I have an application with an accordion. The accordion's section .content is pulled from a server, generated dynamically and can be rather large. Therefore it would be best to load the content only when the user opens the section. My though is that the best way to do this would be binding to a section open event, display a loading icon while fetching the content, then displaying that content.
However, I'm having great difficulty binding to the open event. There does not seem to be a great deal of documentation on the new Foundation 4 section/tabs/accordion. What I did see may have been for foundation 3. It said open/opened/close/closed events should be sent, but they do not seem to be thrown.
The only event I seem able to bind to is "click." Which would work, except the accordion frequently loads with the first section already open. I could run myExampleDynamicLoader($('section.active')) on document ready, but it seems like there should be a less hackish way.
I created a jsFiddle to show what I'm talking about http://jsfiddle.net/HurricaneJamesEsq/6sGGD/14/
Any suggestions?
After reading through the foundation.section.js source, it is pretty clear that sections do not trigger any events. A pull request was added, but in the mean time it looks like this can only be done via 'click' events.

Suggestion for FullCalendar event removal UI

I have my fullCalendar functioning well, however, I need to allow the users to remove events from the calendar. I can use the clickEvent method to bring up a confirmation window with a "do you want to remove" message. But this seems kind of clunky. Is there a better UI way of removing events?
Google calendar uses a qTip on click that offers "edit event details" and "delete". At first I didn't like sending users to a different "event details page" but after thinking about this for awhile it is a really good way to go.
It is always safer to ask for a confirm before removing something.
Anyway you can customize the rendering of the event using the eventRender callback
In particular you can:
attach custom markup to render an X image that when clicked will ajax call a delete function
you can attach other jQuery plugins to reproduce exactly the qTip effect
Have a look at the link for more details. Hope it helps

Resources