Struggling to add GA event to a Marketo Landing Page | Community
Skip to main content
A
Anonymous
June 23, 2015
Solved

Struggling to add GA event to a Marketo Landing Page

  • June 23, 2015
  • 2 replies
  • 4326 views

I have this Landing Page in Marketo: Download Mobile Usability Report 2014

I want to track conversions in GA. It seems the best way to do this is by setting the download action on the button to be a GA Event.

I added this code and it does not fire any events into GA...

$(document).ready(function() { $("form#mktoForm_1012").each(

function() { var jqForm = $(this); var jsForm = this; var action = jqForm.attr("action"); jqForm.submit(function(event) { // when someone submits the form(s) event.preventDefault(); // don't submit the form yet _gaq.push(["_trackEvent", "Reports", "Downloaded", action, , false]); // create a custom event setTimeout(function() { // now wait 300 milliseconds... jsForm.submit(); // ... and continue with the form submission },300); }); }); });

Can anyone help me please?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by

Yea probably. It sounds like you're using the new landing pages and my instructions are for free-form pages. You basically just want that last section of code where you would put any custom HTML for the actual landing page, not in the header.

2 replies

A
Anonymous
June 23, 2015

I've actually done this before. It's a little tricky because you need the scripts to fire in the right order, which is easiest to manage if you put the scripts in the template. Here's the approach that worked for me:

1. Add this script in the <head> section of the landing page template. Replace XXXX with your pod info from the URL to your instance:

     <script src="//app-XXXX.marketo.com/js/forms2/js/forms2.js"></script>

2. Add the Google Analytics snippet under the <!--SYSTEM JAVASCRIPT--> section of the template. It should look something like this:

<!-- Analytics Snippet -->

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ...

</script>

3. Add the form specific script under the <!--START TEMPLATE HTML--> section of the template. This is generic and will apply to any form on the landing page. It should look something like this, though you may not be trying to track all of these events:

<!-- START GOOGLE ANALYTICS CODE HERE -->

<script>

  /**

* Sends to Google Analytics events when actions happen on the form

* @date: 2014-08-15

*/

MktoForms2.whenReady(function (form){

  var ga_label = document.location.pathname + '#formId=' + form.getId();

  // Form Loaded

  ga('send', 'event', 'marketo form', 'load', ga_label);

  // Initiation

  var _gaFormInitiated = false;

  form.getFormElem().find(':input').change(function(){

    //alert ("Form Initiation");

    if (!_gaFormInitiated){

      _gaFormInitiated = true;

      ga('send', 'event', 'marketo form', 'initiate', ga_label);

    }

  });

  // Click the submit button

  form.onSubmit(function(values, followUpUrl){

    //alert ("Form Submitting");

    // Form submitted

    ga('send', 'event', 'marketo form', 'submit', ga_label);

    return true;

  });

// Check if form is valid

  form.onValidate(function(values, followUpUrl) {

    if (values) {

      ga('send', 'event', 'marketo form', 'validation_error', ga_label);

    }

    return true;

  });

  // Form successfully Validate

  form.onSuccess(function(values, followUpUrl){

    //alert ("Form Successfully Validated");

    // Form success

    ga('send', 'event', 'marketo form', 'success', ga_label);

    return true;

  });

});

  </script>

    A
    Anonymous
    June 23, 2015

    Thank you Kristen.

    Steps 1 and 2 seem fine (have added to the template and I can see the page content in GA Real Time).

    I could not find a "<!--START TEMPLATE HTML-->" section in the template. Could that be "<!-- Base of Landing Page Content -->"?

    Lee

    A
    Anonymous
    Accepted solution
    June 23, 2015

    Yea probably. It sounds like you're using the new landing pages and my instructions are for free-form pages. You basically just want that last section of code where you would put any custom HTML for the actual landing page, not in the header.

    A
    Anonymous
    June 23, 2015

    You're preventing the default action but not providing a return to the process.  Try this.. Let me know if that helps.

    $('#mktoForm_1012').submit(function(event){
         var send = false; // To test against and stop submission. 
       var actionVal = $(this).attr('action'); // Get your "action" variable 
       if (send == false) {     
       // call your GA stuff   
         _gaq.push(["_trackEvent", "Reports", "Downloaded", action, , false]);    
        setTimeout(function(){ // Wait 300 milliseconds   
             return; // Returns TRUE to proceed with submission and end this flow.     
       }, 300);     
      }     
       event.preventDefault(); // Just for safety we stop sumission here.  
      });

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    June 23, 2015

    Hey Hussam, not sure what you think your setTimeout() is doing in this code, but it isn't "waiting."  setTimeout calls the passed function asynchronously.  JavaScript is single-threaded and any code block always runs to completion, so that empty "wait" function will not fire until after the submit handler is finished firing (i.e. after event.preventDefault()).  It also will hit the scheduler after the asynchronous methods executed inside _gaq.push().  And optimizing compilers might even remove your empty function completely when compiling, as there's no reason to schedule code that is known in advance to do nothing.

    Also, attaching the form's native submit event isn't correct with Marketo Forms 2.0.  You must use the Forms 2.0 API to be assured of event order.  For example, in your example the _gaq.push() fires even if the form doesn't pass Marketo's field validation.  See Kristen's code in which she correctly (as she works for Marketo!) uses the API's submit, validate, and success events.

    A
    Anonymous
    June 23, 2015

    Thanks Sanford! Makes sense.

    I wasn't sure why Lee had a wait in his code. I actually thought he needed to execute something else during this period. My mistake was looking at the code from a js point of view only. Thanks for pointing these out for me!

    Terms & ConditionsAccessibility statement

    Loading footer...