Outgrow & Marketo - How to use your Marketo Munchkin Code in Outgrow

You can use Marketo Munchkin to record web activity for visitors to your Web Site and Marketo Landing Pages. These activities including Visits and Clicks are recorded with a key that corresponds to a “_mkto_trk” cookie set in the lead’s browser, and Marketo uses this to keep track of the same person’s activities. This document will help you in getting a better understanding of how to use this Munchkin Code in Outgrow.

How to use Marketo Munchkin Code along with Outgrow

Normally, association to lead records occurs when a lead clicks through from a Marketo email or fills out a Marketo form, but since you are using Outgrow's lead generation form to collect user data, we're going to associate lead data by making a Marketo form submission in the background. Background form submission is one of the recommended replacement methods for Munchkin Associate Lead. Here's what you'll need to configure in your Outgrow and Marketo accounts to be able to successfully associate lead data:

1. Grab your Munchkin ID: Go to your Marketo account to copy your Munchkin ID. Copy the code snippet and add it to the External Scripts section of your Outgrow content piece. Here is an example of how the code snippet appears in Marketo:

(function() {
var didInit = false;
function initMunchkin() {
if(didInit === false) {
didInit = true;
Munchkin.init(‘YOUR-CODE');
}
}
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//munchkin.marketo.net/munchkin.js';
s.onreadystatechange = function() {
if (this.readyState == 'complete' || this.readyState == 'loaded') {
initMunchkin();
}
};
s.onload = initMunchkin;
document.getElementsByTagName('head')[0].appendChild(s);
})();

NOTE: Replace YOUR-CODE with your actual Munchkin ID.

2. Create an empty Marketo form: We'll be using Marketo's Forms 2 API to submit a hidden Marketo form. You will need to create an empty form for this, which has no fields. This will ensure that the form doesn’t load any more data than necessary, since we don’t need to render anything. Now just grab the embed code from your form and add it to the External Scripts section of your Outgrow content piece. The embed code will include your own Form ID, Munchkin Code, and Integer ID. Here's a sample embed code with sample Form ID (mktoForm_2020) and Integer ID (2020):

jQuery('body').append('<form id="mktoForm_2020" style="display:none"></form>');
// Change the form id
var a = document.createElement('script');
a.src = '//app-sj09.marketo.com/js/forms2/js/forms2.min.js';
a.onload = function () {
	MktoForms2.loadForm("//app-sj09.marketo.com", "YOUR-CODE", 2020);
// Add your Munchkin code and Integer ID
};
document.querySelector('head').appendChild(a)

NOTE: Notice the display: none style applied to ensure the form remains hidden.

3. Making the form submission: Forms submitted this way will behave exactly as if the lead had filled out and submitted a visible form. Triggering the submission will vary between implementations since each layout will have a different action to prompt it, but you can make it occur on all Outgrow layouts' Lead Submit action. The important part is setting your fields and values correctly. Be sure to use the SOAP API name of your Marketo fields which you can find with Export Field Names to ensure correct submission of Outgrow values.

var found = false;
	setInterval(function(){
	if(!found && jQuery('a.btn.prime-action.ripple-light.leadform-btn')) {
// 'a.btn.prime-action.ripple-light.leadform-btn' contains the class of the lead form's Submit button and will vary for each Outgrow layout.
		var raw_data = [];
		var lead_data = {};
		jQuery('a.btn.prime-action.ripple-light.leadform-btn').on('click',function(e){
// 'a.btn.prime-action.ripple-light.leadform-btn' contains the class of the lead form's Submit button and will vary for each Outgrow layout.
			var form = jQuery(this).parents('form:first');
			if(form.hasClass('ng-valid')) {
				form.find('input').each(function(e){
					raw_data.push(this.value);
				});
				lead_data["FirstName"] = raw_data[0];  
				lead_data["LastName"] = raw_data[1];
				lead_data["Email"] = raw_data[2];
/* raw_data[0] sends the value of the first field from Outgrow's lead form.
   raw_data[1] sends the value of the second field from the lead form and so on.
   lead_data[""] contains Marketo's SOAP API names of your Marketo fields. */
				console.info('Testing', JSON.stringify(lead_data));
				setTimeout( function(){
					if( typeof MktoForms2 != "undefined" ) {
						MktoForms2.whenReady( function (form) {
							form.addHiddenFields(lead_data);
							form.submit();
form.onSuccess(function(values, followUpUrl){
return false;
});
						});
					}
				}, 2000 );
			}
		});
		found = true;
	}
}, 1000);

NOTE: To find the class of any Outgrow layout's Submit button, use Chrome Dev tools.

In case you have any questions feel free to reach out to us using the chat option at the bottom, or you can also send us an email with your query at [email protected]. We will be happy to help you out.