Pushing Form Event to GA with gtag.js?

[Jason_Keller1]

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 here, Sanford 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... 

[Jason_Keller1]

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]

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

[Jason_Keller1]

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]

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]

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]

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 · Accepted solution]

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)