I have a Tag set up in GTM, custom html like this;
<script>
document.addEventListener( 'wpcf7submit', function( event ) {
dataLayer.push({
'event' : 'wpcf7successfulsubmit',
'CF7formID' : event.detail.contactFormId
});
}, false );
</script>
Doesn't work. Not at all. So I put a script on the page.
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
dataLayer.push({
'event' : 'wpcf7successfulsubmit',
'CF7formID' : event.detail.contactFormId
});
}, false );
from a basic example on contactform7.com. This, in GTM preview, triggers fine. The first time it triggers the tag once, the 2nd and subsequent times it triggers twice (implying that both my script and the GTM tag are firing). Guessing at a problem with the event bubbling up. I put the specific selector wpcf7Elm into the tag's custom html but this doesn't work - like the first example.
I have no problem with running from a script but the problem is firing the tag twice so that the analytics shows two events. I would like to use GTM but at the moment the only solution I can see is to go back to on page scripts.
Can anyone suggest what I might be doing wrong? Just to note that I have disabled all plugins and that I am using, on a different page, a wpcf7 event listener successfully (from a script on the page) to perform a presentation function.
Related
I've followed the Google docs to add GTM tags to my site. For some reason the call back is firing 3 times, however, I only have this tag on the page.
window.dataLayer.push({
'event': 'add_expense',
'eventCallback': function () {
alert('wtf');
}
});
Anyone have any clues on why this may be?
It could be you have multiple GTM containers on the page, including plugins. You can check to see if the callback is being passed different containers ids:
'eventCallback': function (id) {
alert(id);
}
This happened to me after enabling GA4 in the page. Seems like it is using same container and rules as GTM and caused callbacks to fire twice. My solution:
const buildGtmCallback = (callback) => {
//GA4 is also a container, so need to fire callbacks only once, for GTM container
//GA4 containerId starts with G-
return (containerId) => {
if (containerId.startsWith("GTM-") && typeof callback === "function") {
callback();
}
}
}
And then whatever you wish to be fired only once:
window.dataLayer.push({
'event': 'add_expense',
'eventCallback': buildGtmCallback(function () {
alert('wtf');
})
});
This solution will also work if you have multiple GTM containers by modifying containerId.startsWith("GTM-") and replace “GTM-“ with the container ID you wish the event to fire for. However in that case you won’t be sure event was fired for both containers, just that one
I m having trouble pushing datalayer to gtm on click event. But datalayer gets properly pushed on a load of the page but not on click. below is my code
$('.load-test-div').on("click", function () {
//console.log('Called properly');
dataLayer.push({
'event': 'display more',
});
});
I have manipulated code in a different way still it's not pushed. For testing, I m using the "Tag Manager" addon of chrome. Is there are any setting to capture click event in google tag manager. Please help!
Without seeing more I can only guess.
For example, this works: https://jsfiddle.net/emo38rbv/
dataLayer = window.dataLayer || [];
document.querySelector('.load-test-div').addEventListener('click', function(){
dataLayer.push({
'event': 'display more',
});
alert('this has pushed to the dataLayer: '+JSON.stringify(dataLayer[dataLayer.length -1]));
});
The issue could be:
Your function is being called before jquery is loaded.
The dataLayer hasn't been declared
The DOM is not ready (the query selector can't find the element)
The element does not exist at the time you run your function
I have a WordPress website and use Google Analytics to track submission of a CF7 form via goals. I have recently added a second form and would like to track this as a separate goal. I've tried altering the event create using this following script:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if (event.detail.contactFormId == '770' {
ga('send', 'event', 'Consultation Request', 'submit');
}
else {
ga('send', 'event', 'Contact Form', 'submit');
}
}, false );
</script>
This still don't seem to separate the forms when I track the events created. Is there something else I can do?
Instead of adding this custom script, I ended up using a plugin called Contact Form 7 Submission DOM tracking This plug added the code needed to create separate goals. Also has a few extra features such as the ability to hind the form after submission.
This is pretty much covered topic for original FB/Twitter buttons. But what if I have my own "share on fb" button? Like this:
<div id="fb_share"><a target="_blank" href="http://www.facebook.com/share.php?u=blah-blah">Share on FB</a></div>
so I've come up with the folloing solution:
var FBbtn = document.getElementById("fb_share");
FBbtn.addEventListener('click', function() {
ga('send', 'social', {
'socialNetwork': 'facebook',
'socialAction': 'share',
'socialTarget': window.location
});
//console.log('tracked');
});
That is placed AFTER the Google Analytics code.
Despite the fact it wont catch FB callback - it is supposed to do the trick but for some reason I still cannot see any results in Analytics so the question is this: will the solution actually work? In fact it could be even like this I believe:
FB
Your 'share on Facebook' links causes the page to navigate (and not open a new window/tab). When this navigation happens, most mainstream browsers cancel all pending HTTP requests for the current page and then navigates to the new page (fb.com)
In this scenario, one of the pending HTTP requests will be the GA event tracking call which will therefore never complete and never be received by the GA servers.
What you need to use is the GA hit callback functionality, this essentially cancels the native navigation (to FB), sends the tracking call and waits enough time for it to complete and then does a JavaScript redirection to the next page.
You should read the google docs here
In your case your event tracking function should be similar to this:
var FBbtn = document.getElementById("fb_share");
FBbtn.addEventListener('click', function() {
ga('send', 'social', {
'socialNetwork': 'facebook',
'socialAction': 'share',
'socialTarget': window.location,
'hitCallback': function(){
window.location = this.href;
}
});
//console.log('tracked');
return false;
});
So I've made the following changes:
Added the hitCallback property to the event tracking call. this is an anonymous function that is called once the GA servers have sent their response to the event tracking.
added a 'return false' statement which cancels the native functionality and then relies on the hitCallback function to do the navigating.
I have problems with trigger my event. In my code:
<script>
dataLayer.push({
'event' : 'GAEvent',
'eventCategory' : 'overlayer',
'eventAction' : 'popup [overlayer]',
'eventLabel' : undefined,
'eventValue' : undefined
});
</script>
In the preview mode my custom event isn`t trigger because of _event rule
which I didnt create in GTM. My trigger from GTM:
Any ideas what I did wrong?
You are passing in "GAEvent" as a dataLayer event, but had the incorrect field in your GTM trigger looking for it. (Screenshot shows "GaEvent").
You also don't need the filter field, which is where you originally put in the uppercase verion.
Change that to the same as the event you are passing in, "GAEvent".
There is always confusion on which events we are talking of, GA, GTM or JavaScript :)