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]

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.

[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]

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.