Pushing Form Event to GA with gtag.js?

Question

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 · Accepted Answer

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;
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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)

Jason_Keller1 · Answer

Here's my current iteration of failure:‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍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!

Sign up

Login with SSO

Login to the community

Login with SSO