SOLVED

Pushing Form Event to GA with gtag.js?

Go to solution
Jason_Keller1
Level 2

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
Jason_Keller1
Level 2

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
Jason_Keller1
Level 2

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! 

SanfordWhiteman
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.

Jason_Keller1
Level 2

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)? 

Jason_Keller1
Level 2

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!") 

Jason_Keller1
Level 2

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? 

SanfordWhiteman
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;
});
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Jason_Keller1
Level 2

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)