9 Replies Latest reply on Nov 15, 2015 2:10 AM by Grégoire Michel

    Struggling to add GA event to a Marketo Landing Page

      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?

        • Re: Struggling to add GA event to a Marketo Landing Page
          Kristen Carmean

          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>

          3 of 3 people found this helpful
            • Re: Struggling to add GA event to a Marketo Landing Page

              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

              • Re: Struggling to add GA event to a Marketo Landing Page
                Grégoire Michel

                If I may adapt Kristen Carmean's version to guided LPs, with Google UA (GTM is a different story).

                 

                First add some Marketo variables in the <head> to be able to ajust the info sent to GA :

                 

                  <meta class="mktoBoolean" id="z-TriggerGAEvent" mktoName="Trigger GA Event" default="true" true_value="YES" false_value="NO" false_value_name="NO" true_value_name="YES">

                  <meta class="mktoString" id="z-GAEventCategory" mktoName="GA Event Category" default="form" allowHtml="false">

                  <meta class="mktoString" id="z-GAEventAction" mktoName="GA Event Action" default="submit" allowHtml="false">

                 

                The first variable will enable the user to decide whether or not a GA event should be triggered, and the 2 other variable will define the event category and action. The event label is defined by the code below and will contain the URL and the form ID.

                 

                Then in the <head> of the template, add your UA code which looks like this one :

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

                 

                Finally, add the following code at the bottom of the template, just before the </body> tag. It will trigger the GA event on form success :

                 

                  <script>

                       MktoForms2.whenReady(function (form) {

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

                            form.onSuccess(function(){

                                 if ( 'YES' == '${z-TriggerGAEvent}') {

                                      ga('send','event','${z-GAEventCategory}','${z-GAEventAction}',ga_label);        

                                 }

                            });

                       });

                  </script>

                 

                Code tested and works.

                -Greg

                1 of 1 people found this helpful
              • Re: Struggling to add GA event to a Marketo Landing Page

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