Page tree
Skip to end of metadata
Go to start of metadata

If you use Marketo, you can create a form to use in an Interaction Studio campaign. This approach ensures that the form is shown to the right people at the right time, and that all of the data captured is returned to Marketo. In Interaction Studio, you can also analyze visitor interactions with your Marketo forms so you know exactly when visitors completed certain actions and how they are related to other behavior on your site.

Since Marketo forms load asynchronously, creating a campaign using a Marketo form is a multi-step process.

Interaction Studio Classic Only

Please note, the contents of this article are intended for customers using Interaction Studio (formerly Evergage Classic). Do not adjust your beacon version to downgrade or upgrade.

This Article Explains

This article will detail the process you can follow to embed a form in an Interaction Studio message using the Marketo Embed code and custom Interaction Studio Message JavaScript.

Sections in this Article


This article assumes that you have integrated Marketo with Interaction Studio and have a working knowledge of Marketo, HTML, and JavaScript. Since Marketo process steps are not provided, please refer to Marketo documentation for guidance on completing any Marketo processes you are not familiar with.

Get the Marketo Embed Code

  1. Log into Marketo and locate the form embed code
  2. You will see a script block similar to this one:
Marketo Embed Code Sample
<script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_621"></form>
<script>
MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621);
</script>

Create the Interaction Studio Message HTML

  1. Create or edit an Interaction Studio campaign
  2. Create the message you want to contain the Marketo form
  3. Open the Message Source Code
  4. Copy the sample sections show below from the Marketo Embed Code for your form and paste them into the Message Source Code HTML in the location you want the form to appear
  5. Click APPLY
Sample Sections
<script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_621"></form>

Create the Interaction Studio Message JavaScript

  1. Open the Experience JavaScript code
  2. Copy and paste the following Interaction Studio Message JavaScript code at line 1
Interaction Studio Message JavaScript
Evergage.util.runWhenReady(
    function() {
        return window.MktoForms2 && typeof window.MktoForms2.loadForm === "function"
    }, function() {
        //Place Marketo loadForm function call here
        MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621);
    }
);

Adding custom Interaction Studio tracking to the form

To add custom Interaction Studio tracking to the form (tracking form submissions, clickthroughs, fields etc), you will need to edit the MktoForms2.loadForm function in the Experience JavaScript.  For example, to track a custom action when the form is submitted and track clickthroughs, you would copy and paste the following into the Interaction Studio Message JavaScript code at line 1.  You can replace "Form Submit Action" in the code block below with the name of any action you would like to track.

Add Clickthroughs on Form Submission

Edit MktoForms2.loadForm
Evergage.util.runWhenReady(
    function() {
        return window.MktoForms2 && typeof window.MktoForms2.loadForm === "function"
    }, function() {
        var formSubmissionAction = "Form Submit Action";
        var shouldCloseOnSubmit = true;
        var shouldDismissOnSubmit = true; 
        MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621, function(form) {
            form.onSuccess(function(values,followUpUrl) {
                Evergage.trackClickthrough("${message.id}", window.location.href);
                if (formSubmissionAction) {
                    Evergage.trackAction(formSubmissionAction);
                }
                if (shouldCloseOnSubmit) {
                    Evergage.hideMessage("${message.cssSelector}", !shouldDismissOnSubmit);
                }
            });
        });
    }
);

Track Form Fields in Interaction Studio

You could also update the JavaScript to track the form fields as custom attributes within Interaction Studio. To do this, edit the MktoForms2.loadForm function in the Message JavaScript. For example, if your form had the fields Email, FirstName, and LastName and you wanted to track those as custom fields in Interaction Studio when the form is submitted, you could update the message JavaScript to use a custom callback as shown in the code block below:

Track Form Fields
Evergage.util.runWhenReady(
    function() {
        return window.MktoForms2 && typeof window.MktoForms2.loadForm === "function"
    }, function() {
        var formSubmissionAction = "Form Submit Action";
        var shouldCloseOnSubmit = true;
        var shouldDismissOnSubmit = true; 
        MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621, function(form) {
            form.onSuccess(function(values,followUpUrl) {
                Evergage.trackClickthrough("${message.id}", window.location.href);
                if (formSubmissionAction) {
                    if (values.Email) {
                        Evergage.setCustomField("userEmail", values.Email, Evergage.Scope.Request);
                    }
                    if (values.FirstName) {
                        Evergage.setCustomField("firstName", values.FirstName, Evergage.Scope.Request);
                    }
                    if (values.LastName) {
                        Evergage.setCustomField("lastName", values.LastName, Evergage.Scope.Request);
                    }
                    Evergage.trackAction(formSubmissionAction);
                }
                if (shouldCloseOnSubmit) {
                    Evergage.hideMessage("${message.cssSelector}", !shouldDismissOnSubmit);
                }
            });
        });
    }
);