Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

pixthirdparty
If you use Marketo, you can create a form to use in an Evergage 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 Evergage, 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.


Panel
borderColor#ccc
titleColor#404040
borderWidth1
titleBGColor#f4f5f7
titleThis Article Explains

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



Panel
borderColor#ccc
titleColor#404040
borderWidth1
titleBGColor#f4f5f7
titleSections in this Article

Table of Contents
maxLevel2



Note

This article assumes that you have integrated Marketo with Evergage 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:
Code Block
languagexml
titleMarketo 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 Evergage Message HTML

  1. Create or edit an Evergage 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
Code Block
languagexml
titleSample Sections
<script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_621"></form>


Create the Evergage Message JavaScript

  1. Open the Experience JavaScript code
  2. Copy and paste the following Evergage Message JavaScript code at line 1
Code Block
languagejs
titleEvergage 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 Evergage tracking to the form

To add custom Evergage 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 Evergage 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

Code Block
languagejs
titleEdit 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 Evergage

You could also update the JavaScript to track the form fields as custom attributes within Evergage. 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 Evergage when the form is submitted, you could update the message JavaScript to use a custom callback as shown in the code block below:

Code Block
languagejs
titleTrack 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);
                }
            });
        });
    }
);

 

 

Hidestuff