Lead Gen Template

MoEngage On-site Messaging now allows you to capture the leads from your website visitors. You could choose to capture the Email Id, Mobile Number or any other preferences and save it in your moengage user profiles for re-targeting.

Popular Use-cases with the Lead Gen Template

Below are a few popular use-cases for using the Lead Gen Templates - 

  • Capture the Email Address of website visitors so that you can re-target them via Emails later.
  • Capture the Mobile Number of website visitors so that you can re-target them with SMS later.
  • Capture the Name of the user to personalize the communication to the user.
  • Capture user interest related to the choice of brands, products, and so on.

Create Lead Gen Campaign

Lead Gen Template is a special template available in MoEngage On-site Messaging Campaigns. To create a Lead Gen Campaign in MoEngage, follow the below steps -

  • Select the Lead Gen Template during On-site Messaging Campaign Creation.
    LeadgenTemplate.png

  • Configure the On-site Messaging campaigns as per the docs here.

  • Map the input from the Lead Gen Template to user attributes: On the step-2 of campaign creation, click on the input widget of the template and then actions to configure the user attribute where this input will be saved.

    Screen_Shot_2020-06-30_at_12.33.00_PM.png

  • If one out of the two input widgets is not required, you could also hide the input widget as shown below -
    Screen_Shot_2020-06-30_at_12.33.41_PM.png

Where to see the captured data?

After the Lead Gen Template is shown to your users and they submit the form as shown below, the data is tracked and saved in MoEngage automatically.

  Screen_Shot_2020-06-30_at_12.39.37_PM.png

 

You can see the saved input in MoEngage user attributes. We also track an event - MOE_RESPONSE_SUBMITTED whenever a submission happens using a Lead Gen Template.

This data is visible in the user profile as shown below -

Screen_Shot_2020-06-30_at_12.48.37_PM.png

MoEngage captures the First Name and Email Address user attributes. 

Add more input fields by changing the template content. 

Example - Phone Number

Add a <input> field for the phone number after the Email Address by using the following code.

JavaScript
<input
                      placeholder="Phone Number"
                      class="input-container moe-element"
                      data-id="INPUT3"
                      id="TEXT_INPUT_3"
                      data-user="u_mb"
                  />
<label class="moe-error-text invisible">This field is required</label>

To make phone numbers mandatory add required in the Phone Number input field.

Example - Error Message

If you have marked a field as mandatory, please use the below JS to show an Error message when the form is submitted without that field.

JavaScript
<label class="moe-error-text invisible> any error message </label>

Example - Custom Validation

The lead template validates for a valid email address, but if you want to add any other validation to the existing fields or the new form fields that you have added please change the <input … /> tag of that field and add the following code:

JavaScript
data-input-validation-type="any name"

Next, add the custom validation of the field in isFormDataValid() method. For example below is the validation check for an Indian mobile number 

JavaScript
//Mobile number validation
function isMobileNumberValid(mobile) { 
const mobileRegex = /^[789]\d{9}$/;
return mobileRegex.test(mobile);
}

Use the isMobileNumberValid() method inside isFormDataValid() for validating mobile number.

Was this article helpful?
0 out of 0 found this helpful