Adding new data layer variable for click / element visibility event - google-analytics

On my blog, I have a related content section and I want to track which images get the most clicks.
I'm using Google Tag Manager which already triggers an event in Google Analytics when a post in the related content is visible and then clicked, but I can't manage to pass through the image ID to Google Analytics as a Custom Dimension for reporting.
How do I add this value as it's own data layer variable?
I've tried adding a custom event but this creates a new event, but I want to add the ID to the click event or the element visibility event.

Related

Keeping user properties between events (Google Tag Manager, Google Analytics 4)

I have a question about user properties in Google Analytics 4.
I created 2 events:
The first one is called custom_session_start and it is triggered every time new session started.
The second is called UI_Interaction which is event that triggers every time that the user is clicking on something in the website.
The custom_session_start has some user properties and event parameters his specific tag in GTM.
The UI_Interaction event has only event parameters in his specific Tag.
From what I know the user property should be save unless I change it manually, so if I created some user properties in custom_session_start they also should be appear in UI_Interaction.
However, when I create a report in GA4 the user properties are only set in every custom_session_start event and they are empty in UI_Interaction event.
Is there a way to keep them also when the UI_Interaction occurs?

Google Tag Manager custom event (product page views) not firing tags

I tried to set up a tag that should be firing when a customer goes on the product page.
I found out in the dataLayer that there is this object: pageType: 'product'
After that I used this object in my trigger as so:
In the tag itself, I made sure that enhanced ecommerce was enabled, and also checked the checkbox that dataLayer is being used, however it is still not firing.
The first thing you need is to create a custom variable to capture the information stored in the dataLayer.
In the main menu, click variables:
Click on the button "New" in the User Defined Variables section.
Name the variable DLV - pageType, select Variable Type Data Layer Variable name it pageType and hit Save when you are done:
Next, click on Triggers in the main menu to add a new trigger. Name the trigger, select Page View as trigger type, Only Some Page Views and make sure it only fires when DLV - productType equals product:
Now the only thing that is left is to configure the tag to the trigger.

Why can't I see Event Listener as an option under Choose Product part in Google Tag Manager

I'm trying to create an Auto Event Tracking tag in GTM. However, I can't find Event Listener option under product types. You can see the screenshots of two tags with and without Event Listener.
What am I missing?
Thanks for helping out.
Are you wanting to fire a tag based on an event that occurs? From the looks of your tag name, Link Click Listener, you'll want to create a trigger that matches your criteria and then apply the trigger to the tag(s) you are creating. You needed to create event listeners in older versions of GTM, but the newer versions will automatically listen to link clicks. More info on auto-event triggers can be found here.
click listener trigger screenshot

Capturing Multiple dataLayer Attributes with Google Tag Manager

I have been able to capture and push URL's with the Google Tag Manager default, but I have been having trouble trying to push custom data layer attributes.
For example:
Before the GTM script loads I push the current page url into the dataLayer.
<script>
var currentPage = (document.URL);
dataLayer = [{
'pageURL': currentPage
}];
</script>
And then on various elements I'm pushing content to the dataLayer when they are clicked:
<a id="tracking-image" href="#" onclick="dataLayer.push({'#elementID': 'tracking-image'});"></a>
I've been having trouble capturing these in GTM / Google Analytics. Ultimately I would want in captured in Google Analytics like so:
Label: currentPage
Action: tracking-image
But currently it's just tracking the gtm.js event firing multiple times.
You do not need to push the element id to the datalayer (GTM can read the id by itself). What you are missing is an event to trigger your tag.
"Events" in GTM are not related to event tracking in Analytics and only vaguely related to native Javascript events. "event" is a reserved macro name, and it's purpose is to trigger tags; there are some pre-defined events on page load start (gtm.js) , page load finish (gtm.dom) etc.
If you want to trigger a tag that does not fire on page load chances are that you need a custom event.
One way would be to change your code like this:
<a id="tracking-image" href="#" onclick="dataLayer.push({'event': 'imagetracker'});"></a>
Then you could set up a rule with the condition "{{event}} equals imagetracker" which you fire your tag.
Probably a better way would be to use GTMs event listener tags. There is a link click event listener tag and a generic click listener tags. Since your link target is not a valid url I would choose the generic click listener. So you'd set up a new tag of the type click listener and have it fire on all pages. Now if an element is clicked the event macro will be assigned the value of GTM click.
Event listeners will also automaticall fill auto-event variables that hold various properties of the clicked element. This would allow you to access the clicked elements id though a macro called, somewhat unsurprisingly, "element id".
So you would create a rule where "{{event}} equals gtmClick" AND "{{element id}} equals imagetracker". That would fire a tag if the link is clicked.
Caveat is that GTMs event listener tags fail when there is already a click event on the element that returns "false" to suppress standard behaviour. Infos and workaround are and workaround on Simo Ahavas Blog (which is pretty much the go-to place for all things GTM-related).

Google Tag Manager's gtm.formSubmit not firing for AJAX forms

When I create a tag to listen for form submissions using Google Tag Manager.
For my ajax submitted form which does not go to a new page, the submission of a form does not fire the gtm.formSubmit event into the data layer.
What should I do instead?
I need a "codeless" solution to detect form submission and to capture the submitted values.
I ran into another potential reason for this as well and thought I'd drop it in here.
In the Form Submit Listener, you need to have Check Validation unticked for AJAX forms (if the Submit button is blocked from doing a normal submit, as you would do with AJAX forms, this option blocks the listener from firing the correct event).
I have an ajax submitted form and the formSubmit click listener and event tags are working for me.
You might be doing this already, but just to double check;
You are adding 2 tags - the formSubmit listener and the Analytics event tag for that event?
Are you setting up the filters correctly (i.e. including event equals gtm.formSubmit, and the appropriate page?)
If it still isn't working, another suggestion is to use a simple click listener, then filter for both the page the form is on and the id of the submit button.
Here is how Google recommends doing it.
Add a basic page tracking tag (i.e. Tag Type of Google Analytics or Universal Analytics; Track Type of Page View) if you don't already have one. This tag must fire on all pages.
Add a tag of type Event Listener > Form Submit Listener. You can name it “Form Submit Listener”. Add a single firing rule of "All pages", or, for the specific page(s) on which you want to listen for form submissions.
Add a rule (named "Form Submit" for example) with the following condition:
{{event}} equals gtm.formSubmit
Add an Analytics event tracking tag (i.e. Tag Type of Google Analytics or Universal Analytics; Track Type of Event). Add the rule you created in the previous step as the firing rule (for example, "Form Submit"). Enter a Category, Action, and and Label for the event. For example, you might use the following:
Category "Forms"
Action "Submit"
Label "Lead Gen".
Save a version of the container and publish it.

Resources