Issue with Submitting marketo forms with events in GA

[Manish_Khemani1]

Hello There,

I have created a Marketo Form and inserted its embed code in the (External) Landing page

http://sites.tcs.com/marketo-form-test/

Also, I have added code for from validation - to restrict any personal email ids i.e. gmail, hotmail, etc. - This is working fine.

We also need a ga event (ga('send', 'event', 'Download', 'Click', 'GTS-2016-Download');) fired on Successful form fill; for this we have used the onSuccess handler, But the event is NOT firing; Attaching the code used in Title of the document below: Could Anyone guide what is that We are doing Wrongly to not fire the Event. We have implemented GA code via GTM in the head section of the page.

-------------------------------------------------------------------------------

<form id="mktoForm_3683">

<div style="margin-left:275px; margin-bottom:10px;">

<script src="https://www.linkedin.com/autofill/js/autofill.js" type="text/javascript" async></script><script type="IN/Form2" data-form="mktoForm_3683" data-field-firstname="FirstName" data-field-lastname="LastName" data-field-phone="MobilePhone" data-field-email="Email" data-field-company="Company" data-field-title="Title"></script>

</div></form>

<br>

<link type="text/css" rel="stylesheet" href="form2.css" />

<script>MktoForms2.loadForm("//app-sji.marketo.com", "120-PTN-868", 3683, function (form){MktoForms2.lightbox(form).show();});</script>

<script>

(function (){

  var invalidDomains = ["@gmail.","@yahoo.","@hotmail.","@live.","@aol.","@outlook."];

  MktoForms2.whenReady(function (form){

  form.addHiddenFields({

    ReferringSite : document.referrer

  });

    form.onValidate(function(){

      var email = form.vals().Email;

      if(email){

        if(!isEmailGood(email)) {

          form.submitable(false);

          var emailElem = form.getFormElem().find("#Email");

          form.showErrorMessage("Please use your business email. Thank you!", emailElem);

        }else{

          form.submitable(true);

        }

      }

    });

  /* --------------------------------------------- */

  form.onSuccess(function (values, url){

  /////var url ="https://www.google.com" (https://www.google.com%27) ;

  //alert("VAL :"+values);

  //alert("URL :"+url);

                    // Send a "Event" to google analytics to trigger a premium content download for this piece of content

                    ga('send', 'event', 'Download', 'Click', 'GTS-2016-Study-Known-User');

                    // Opens the form's Follow Up URL on successful completion (the asset is specified in the Marketo form config)

                    ////window.open(url, 'myWindow');

                    ///form.getFormElem().hide();

                    // add the custom thank you message and download link to the actual asset

                   //// var thankYou = "";

                    ////form.getFormElem().before("<p style='padding:10px;width:283px;font-size:14px;color:white;height:100px;text-align:center'>Thank you for downloading.<br/><br/>Your content will open in a new window.</p>"); 

                    return true;

                });

    /* --------------------------------------------- */

  });

  function isEmailGood(email) {

    for(var i=0; i < invalidDomains.length; i++) {

      var domain = invalidDomains[i];

      if (email.indexOf(domain) != -1) {

        return false;

      }

    }

    return true;

  }

})();

</script>

----------------------------------------------------------------

[Erik_Heldebro2]

Hi Manish,

You need to just create an Event in GA upon successful form fill?

I went through this a few weeks ago and used this script in the end of the body:

<script>

        MktoForms2.whenReady(function (form) {

form.onSubmit(function(){

        ga('send', {

          hitType: 'event',

          eventCategory: 'Fills out Form',

          eventAction: 'Downloads Content',

          eventLabel: 'Guide'

});

	});
	});

        </script>

Also given that the GA script is in the head.

[SanfordWhiteman]

The problems with using onSubmit instead of onSuccess are two:

1. Multiple onSuccess functions can run, and if any of those stop form submission you've erroneously logged a form submit when it never happened.
2. You're just masking the race condition by making it less likely, but not eliminating it. There is no guarantee that ga() is going to finish before onSuccess runs and the page unloads.

The only way to reliably log a successful form submission to GA is to use hitCallback:

form.onSuccess(function(vals,tyURL){
     ga('send', {
          hitType: 'event',
          eventCategory: 'Fills out Form',
          eventAction: 'Downloads Content',
          eventLabel: 'Guide',
          hitCallback: function() {
            document.location.href = tyURL;
          }
    });
});

[Manish_Khemani1]

Thanks Stanford and Erik,

I placed the exact code (as in Standford's reply) but the Event Did Not fire. We are using GTM in Head to Fire the GA codes. Does this piece of code work with GTM?

Or Am I Doing Anything Wrong on http://sites.tcs.com/marketo-form-test/

Best,

Manish

[SanfordWhiteman]

I clipped the crucial part, sorry:

form.onSuccess(function(vals,tyURL){ 
     ga('send', { 
          hitType: 'event', 
          eventCategory: 'Fills out Form', 
          eventAction: 'Downloads Content', 
          eventLabel: 'Guide', 
          hitCallback: function() { 
            document.location.href = tyURL; 
          } 
    }); 
    return false;
});

[Manish_Khemani1]

Hi Stan,

Tried this code too (with 'return true' since we need to take the user to a Thank You page configured in the Marketo form) But it Still did not work.

Has it got anything to do with GTM?

Regards - Manish

[SanfordWhiteman]

Indeed you probably have installed GA incorrectly. You can observe a correctly operating page here: MktoForms2 :: GA

Note the use of return false; as required.

Screenshots to confirm operation:

[Manish_Khemani1]

Hi Stan,

I checked the GA configuration from GTM and found no issues; Even the Tag

Assistant gives me a green signal J; Screen grab below:

Do Know If this is Appropriate - Any Number I can reach you on?

With Best Regards

Manish Khemani

Tata Consultancy Services

Mailto: manish.khemani@tcs.com

Website: http://www.tcs.com

[SanfordWhiteman]

OK, I kept looking into this. The problem with your GA setup is that you have two auto-named GA trackers. Neither is the default so ga('send'...) will not work.  Only ga('{tracker_name_here}.send') can be used. Make sure you hard-code understandable names for each, then you can use ga('friendly.send',...). 

The form events are being handled correctly, so this is not a Marketo-related problem.

[Manish_Khemani1]

Also Stan,

If I Need to fire a GA Event for a Known User - Will the form.onSuccess

handler work or is there some other code that needs to be written?

Thanks Again!

With Best Regards

Manish Khemani

Tata Consultancy Services

Mailto: manish.khemani@tcs.com

Website: http://www.tcs.com

[SanfordWhiteman]

If I Need to fire a GA Event for a Known User - Will the form.onSuccess

handler work or is there some other code that needs to be written?

If you're using the Known Lead HTML feature and somebody clicks the Download button, that will fire ​onSuccess.

[Manish_Khemani1]

Hi Stan,

Thanks for Your Observation; Appreciate Your Efforts in Helping Me Out J.

We have configured 2 tags for GA - Pageview (shown in the screen shot) and

we tried using the tracker name in the form.Onsuccess code - which now is

as follows, But Yet The Event does Not Fire.

[SanfordWhiteman]

Hi Stan,

Sanford or Sandy please, not Stan.

We have configured 2 tags for GA - Pageview (shown in the screen shot) and

we tried using the tracker name in the form.Onsuccess code - which now is

as follows, But Yet The Event does Not Fire.

I don't see a screenshot attached. I do see that you've now broken the onSuccess with a JS syntax layer.

You shouldn't be testing in onSuccess because the form is not involved and this will just create more steps to go through when testing. This is a pure GA issue.

When you say you're using the "tracker name" I doubt you are doing this correctly.  You're using auto-naming, which means every time the page draws there's a new name.  For example, this will work once, but never again:

     ga('gtm1478804647856.send', {

          hitType: 'event',

          eventCategory: 'Fills out Form',

          eventAction: 'Downloads Content',

          eventLabel: 'Guide',

    });

[SanfordWhiteman]

And btw this is what it looks like when you correctly start a ga('send') ​but do not correctly control for the gaping race condition with ​hitCallback:

[SanfordWhiteman]

Not really interested in results from automated tests -- only a human can correctly assess such installations.

Try to run the ga('send', ... ) directly from the Dev Tools console and you'll see that it fails to generate any network traffic on your site. This has nothing to do with form events.

[SanfordWhiteman]

You absolutely do not want to return true. That breaks the whole concept here. Do not do this.

I can't tell you if you're using GTM correctly.  If the global ga object exists then you'll be fine.