SOLVED

Pushing Form Event to GA with gtag.js?

Go to solution
Highlighted

Pushing Form Event to GA with gtag.js?

I'm trying to get Marketo form submissions to log as events in GA. The script I have tried is not working, and I *think* I know why: We use Tag Manager, but GA is actually deployed separately as a Global Site Tag (gtag.js) independent of GTM. This is different from analytics.js too, which, in previous threads, here and hereSanford Whiteman already provided solutions.  

This is the code I have put together (from previous community posts:

<script> 
form.onSuccess(function(vals,tyURL){


gtag('send', {
hitType: 'event',
eventCategory: 'Marketo',
eventAction: 'Conversion',
eventLabel: 'Content Download',
hitCallback: function() {
document.location.href = tyURL;
}
});

return false;
});
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note that I changed the callback from "ga" to "gtag" with the hopes that it would work (which it did not). 

So I'm looking for help with a couple of questions:

  • Is there a different way to push this event back to GA with gtag.js?
  • If so, where should the script go?
    • Could I push it through GTM?
    • Or do I need to place it in MKTO templates above or below the form?

[Bonus Points] Is it possible to call the Marketo form id (or form name, which would be even better) for eventLabel? I am pretty bad at JS (thus this help request), but could that look something like this?

Example:

eventLabel: "mkto.form.id": form.getId(),‍‍

Thanks for any help! Here's a test page that is currently failing miserably... 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

Re: Pushing Form Event to GA with gtag.js?

Thanks Sandy! 

The script you shared needed a tiny syntax fix. Here's the final that I have up and working in case anyone else has a similar use case: 

MktoForms2.whenReady(function(form) {
form.onSuccess(function(vals, tyURL) {
gtag("event", "Content Download", {
event_category: "Marketo Conversion",
event_label: "MKTO ID: " + form.getId(),
event_callback: function() {
document.location.href = tyURL;
}
});
return false;
});
});

(Just needed to close the third-to-last parentheses)

View solution in original post

7 REPLIES 7
Highlighted

Re: Pushing Form Event to GA with gtag.js?

Here's my current iteration of failure: 

<script> 

MktoForms2.whenReady(function (form) {

form.onSuccess(function(vals,tyURL){
gtag('event', 'Conversion',
{
'event_category': 'Marketo',
'event_label': 'mkto.form.id'
});
{ document.location.href = tyURL; }
})

})

</script>

Because gtag.js handles requests differently than analytics.js, I tried to adjust the call to match what's here on the Google Analytics documentation: Migrate from analytics.js to gtag.js  |  Analytics for Web (gtag.js) 

I'm clearly still lost, so if anyone has run into this before, thanks for any guidance! 

Highlighted
Level 10 - Community Moderator

Re: Pushing Form Event to GA with gtag.js?

Please provide the URL of the page you're working on, but without any custom code.

Highlighted

Re: Pushing Form Event to GA with gtag.js?

Thanks for the response Sandy! I have the script running on this page within the template (not pushing through tag manager).

Want me to remove the script (pasted right before /body)? 

Highlighted

Re: Pushing Form Event to GA with gtag.js?

Also I couldn't help but laugh when you helped someone with a related issue and they kept calling your Stan (even after you politely asked them to stop they were like "tHaNks StAn!") 

Highlighted

Re: Pushing Form Event to GA with gtag.js?

Well it looks like somehow this worked:

<script> 

MktoForms2.whenReady(function (form) {

form.onSuccess(function(vals,tyURL){
gtag('event', 'Conversion',
{
'event_category': 'Marketo',
'event_label': 'mkto.form.id'
});
{ document.location.href = tyURL; }
})

})

</script>

I had to stitch together two other versions of the same thing. Still testing but saw an event logged in GA. 

Sanford Whiteman‌ anything you would to to make this more efficient? (Also could I call the form id as the event label? 

Highlighted
Level 10 - Community Moderator

Re: Pushing Form Event to GA with gtag.js?

Still not quite right. You've added another block scope, but that isn't doing anything. Without using a callback this will not be reliable cross-browser. You want:

MktoForms2.whenReady(function(form) {
form.onSuccess(function(vals, tyURL) {
gtag("event", "Conversion", {
event_category: "Marketo",
event_label: "mkto.form.id",
event_callback: function(){
document.location.href = tyURL;
}
);
return false;
});
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

or with the ID:

MktoForms2.whenReady(function(form) {
form.onSuccess(function(vals, tyURL) {
gtag("event", "Conversion", {
event_category: "Marketo",
event_label: "mkto.form.id: " + form.getId(),
event_callback: function(){
document.location.href = tyURL;
}
);
return false;
});
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Highlighted

Re: Pushing Form Event to GA with gtag.js?

Thanks Sandy! 

The script you shared needed a tiny syntax fix. Here's the final that I have up and working in case anyone else has a similar use case: 

MktoForms2.whenReady(function(form) {
form.onSuccess(function(vals, tyURL) {
gtag("event", "Content Download", {
event_category: "Marketo Conversion",
event_label: "MKTO ID: " + form.getId(),
event_callback: function() {
document.location.href = tyURL;
}
});
return false;
});
});

(Just needed to close the third-to-last parentheses)

View solution in original post