Google Tag Manager + Forms + Wordpress

[Anonymous]

I searched through all the current GTM discussions and unfortunately i haven't found one solution that will work for us.

My issue is, we are using a shortcode in Wordpress, which calls a marketo form script, to load a form on our page. I want to be able to track certain marketo form submissions in Google Analytics. I currently use Google Tag Manger, but it isn't working the way I have it set up and I think I need to use the marketo script to do this.

Specifically, I want to track anyone that downloads an eBook on our website.

Here is the marketo script I am using:

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

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

<form id="mktoForm_439"></form>

<script>MktoForms2.loadForm("//app-aba.marketo.com", "940-UPM-848", 439,function(form){

      form.onSuccess(function(values, followUpUrl){

// change location.href to location of document

location.href = "/wp-content/uploads/2015/06/eBook_5-Tips-for-Using-Humor-in-Benefits-Communication.pdf";

return false;

      });

// set the name of the document name

// change this

var docName = "5 Tips for Using Humor in Benefits Communication";

// change the name of the document

var resource = "meetalex_websitedownload_null_ihumorebook_null";

form.vals({"Lead_Source_Detail__c" :  resource });

// change the name of the resource

var resource = docName;

form.vals({"Recent_Resource__c" :  resource });

    });;</script>

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

The shortcode on Wordpress is [acf field="form_script"]

Any ideas how to get this to load into Google Analytics as a download? I want to track this form specifically, as we have another form on our site for contact us, which we track separately. That has a different formID though, so differentiating between them is a must.

Thanks in advance for any help!

[Casey_Grimes]

Hi Kimberly,

Are you tracking form submissions as events or goals in Google Analytics? Are your triggers firing on the default form event that ships with GTM or are you using a custom event?

It's hard to give an accurate answer without knowing your specific setup.

[Anonymous]

Hi Courtney!

We were trying to track form submissions as events in GA, by using GTM. I would like to make it a goal in GA for simplicity (so my boss can specifically see as a goal, how many form submissions there are).

Does that help!?

Thanks!
Kimberly

[Casey_Grimes]

Hi Kimberly,

Thankfully, that's pretty straightforward to do. You would simply edit your Forms 2.0 embed from

<script src="//[marketo server]/js/forms2/js/forms2.js"></script>
<formid="[form id]"></form>
<script>MktoForms2.loadForm("[marketo server]", "[munchkin]", [form id]);</script>

to the following:

<script src="//http://app-sjh.marketo.com/js/forms2/js/forms2.js[marketo server]/js/forms2/js/forms2.js"></script>
<formid="[form id]"></form>
<script>
MktoForms2.loadForm(("[marketo server]", "[munchkin]", [form id], function(form){
  form.onSubmit(function(){
    ga('send', {
  'hitType': 'event',
  'eventCategory': '[your category]',
  'eventAction': '[your action]',
  'eventLabel': '[your label]'
});
  });
});
</script>

Where the brackets in each refer to your own form ID/Munchkin/Marketo server and whatever event values you're using in Google Analytics. Note that this assumes you've upgraded to Universal Analytics.

EDIT: That being said, your final embed code would look like

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

<form id="mktoForm_439"></form>

<script>MktoForms2.loadForm("//app-aba.marketo.com", "940-UPM-848", 439,function(form){

     form.onSubmit(function(){

         ga('send', {

            'hitType': 'event',

            'eventCategory': '[your category]',

            'eventAction': '[your action]',

            'eventLabel': '[your label]'

          });

    });

     form.onSuccess(function(values, followUpUrl){

          // change location.href to location of document

        location.href = "/wp-content/uploads/2015/06/eBook_5-Tips-for-Using-Humor-in-Benefits-Communication.pdf";

        return false;

      });

// set the name of the document name

// change this

var docName = "5 Tips for Using Humor in Benefits Communication";

// change the name of the document

var resource = "meetalex_websitedownload_null_ihumorebook_null";

form.vals({"Lead_Source_Detail__c" :  resource });

// change the name of the resource

var resource = docName;

form.vals({"Recent_Resource__c" :  resource });

    });;</script>

If you wanted to, you could always move your docName variable and use that for the event label as well for simplicity's sake.

[Anonymous]

Thanks Courtney! This is so helpful and I am going to go try this right now!

[Anonymous]

I just recently completed a project where I integrated Marketo and Google Analytics. I published an article and accompanying cheat sheet, both are available from Google Analytics-Marketo End-to-End Integration​ - I think you will find some valuable examples you could apply for your WordPress integration. 

[Anonymous]

Stephane, I've been working on trying to implement your solution, however, any time I try to update the embed code beyond the generic code generated by Marketo, the form disappears from the landing page. Any ideas on what might be causing this? Thanks!