I have the standard Mailchimp pop up embedded on my site. I would like to trigger a GTM event every time it's submitted to send to GA. It's an embedded iframe and I'm not seeing a way to handle this. This is the embed code for the pop up:
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/xxxx/xxxx.js");</script>
I've tried reviewing the form class, form element and other form triggers, but nothing is triggering the GTM event.
GTM's "Form Submission" trigger cannot catch form submissions in (embedded) iframes.
If you are only interested in the submit, you can add a custom event listener via a "Custom HTML" tag which pushes a custom event to dataLayer which you can then act on in GTM.
document.querySelector('#PopupSignupForm_0 div.mc-modal iframe').contentDocument.querySelector('form').addEventListener('submit', function(event){dataLayer.push({event: 'mailchimp_submit'})});
This triggers every time the "subscribe" button is clicked - also when the form does not validate.
Maybe it is better to use a Timer trigger which checks for a "MCPopupSubscribed" cookie with the value "yes"?
Create a Variable "MCPopupSubscribed", 1st Party Cookie, Cookie Name: "MCPopupSubscribed", Format Value: Convert undefined to "no"
Create a Variable "TimerID", Data Layer Variable, "gtm.timerId", Version 2
Create a Trigger "Mailchimp", Timer, Event Name: "gtm.timer", Interval: 1000, Enable ...: MCPopupSubscribed does not equal yes, Fires on some timers: MCPopupSubscribed equals yes
Create your tag, fires on "Mailchimp" trigger
Create a Tag "Clear Timer", Custom HTML, fires on "Mailchimp" trigger
if ({{TimerID}}) {
window.clearInterval({{TimerID}});
}
The Timer will only "run" if the cookie is absent. It then checks every second if the cookie was set. If it is set it runs your tag and it runs "Clear Timer" to stop the timer/trigger. If it the timer is not stopped the trigger keeps firing every second.
There's also a cookie MCPopupClosed=yes which is set if the user closes the popup...
Related
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?
I'm running into an issue for a form submission event firing too often (200x). The trigger for the event is created from the GTM standard Trigger Type of "Form Submission" where we're checking validation and have specified the conditions to be only on the Page URL where the form exists. We've tested it in GTM preview mode and seeing that the event fires.
Update 1/28-
The form is on a pop-up through our homepage (https://mybrightwheel.com) after the user clicks on "Request a Demo" (so the event fire should not happen on this initial button click). The event fire should occur after they get into the demo request form and complete a successful form submit. And below that is a shot of the trigger. Any help here is appreciated.
That trigger hasn't specified which button it's firing on. You have 2 buttons in that screenshot, it's recording both. You need to tell it to fire on one button or the other by specifying link text or link url (i.e. where the user ends up on clicking the link)
Given that I want to track successful sign-ups
When I set up in Google Tag Manager:
Trigger type: Click - All Elements
Trigger fires on: click classes contain "ht-app__form-submit"
Then my trigger fires any time someone hits the "Sign button" on this page
https://www.myhometouch.com/app/register
OK.
However, I only want to track the clicks where the sign-up was successful, so I want to "check validation" but this creates two questions for me:
1. With trigger type "All Elements" you cannot enter a validation, but if I select the other option "Click - Just Links", then my Google Tag Manager debugger shows that my Tags are not firing anymore. So which event type do I need to set up in GTM?
2. After I find the right event, what would be the correct "check validation" to enter to make sure only successful sign-ups are counted? Would it be Click URL with some value? Any insight in this would be much appreciated.
many thanks
screenshot
I would push an event to dataLayer after the successfully validation (supposing you have access to the project code files where the validation is made)
dataLayer = window.dataLayer || [];
dataLayer.push({
'event' : 'signupEvent',
});
And then I'd use that event to create a custom trigger to fire the desired Tag
HTML forms and links (references) are two diffent type of things. Your form is not a link, so this is not the right path.
You also don't need the explicit click tracking but the form submission tracking. Select the trigger "form submit". Then check the box "check validation". In the next drop down you can select the variable "Click Classes". This one should contain the value of your form class.
You can declare a variable in Google Tag Manager that checks if the Login Form input texts are filled (not empty) and then, pass this variable to the trigger and set it to fire only if fileds are not empty.
Please find an example in these screenshots:
GTM variable
GTM trigger
Hope this was helpful !
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).
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.