Integrating subscription point code to website forms allows subscribers to opt-in to a marketing list. Collecting additional information such as first name, last name, and interests allows marketing message segmentation to further enhance customer experience.

Before beginning, confirm the following steps are complete: 

  1. Website integration is complete and the Javascript Framework is installed. 
  2. If integrating a checkout subscription point: order collection code is installed. 

1. COMPLIANCE

The subscription point code will implicitly capture email addresses and browsing session data for use with other Listrak solutions such as Browse Abandonment, Shopping Cart Abandonment, and Product Recommendations. 

Listrak offers a code option to pass a visitor’s consent status for GDPR compliance. If consent is passed as false, then the Listrak code will not implicitly capture email addresses and browsing session data for other Listrak solutions. To learn more, please visit our GDPR course here. If you do not have a Thrive account, please contact education@listrak.com. 

If you have already addressed GDPR for Listrak and other third-party systems on your website, please continue to the next step.

2. EXTERNAL EVENT

Set up an Email External Event to trigger a contact into an automated campaign workflow for Email. If you would like to do this, follow the steps outlined here.

3. PROFILE FIELDS

Use data collected in Profile Fields for segmentation or personalization to message a target audience. The fields can be mapped to subscription points in order to capture the data from your website. Follow the steps for SMS or Email.

4. SUBSCRIPTION POINT SETUP

The next step is to create a new subscription point. This is where you will bring all the previous elements together in identifying when a subscriber signs up, what event is triggered, what is the source, and what personal information is collected. Follow the steps for SMS or Email.

5. WEBSITE INTEGRATION

Our Signup object can be used on the website to collect the user's email address, profile data, and consent to subscribe users to a list. Here is a code example:

HTML

<form ID="FooterNewsletter">
<input type="email" ID="FooterNewsletterEmail" placeholder="Email Address">
<input ID="FooterNewsletterFirstName" placeholder="First Name">
<input ID="FooterNewsletterLastName" placeholder="First Name">
<button type="submit" ID="FooterNewsletterSubmit">Sign Up</button>
</form>

JavaScript

_ltk.Signup.New('Footer', 'FooterNewsletterEmail',
_ltk.Signup.TYPE.DEFAULT, 'FooterNewsletterSubmit');
_ltk.signup.SetField('Footer', 'footerNewsleterFirstName',
{key:"firstName"});
_ltk.Signup.SetField('Footer', 'FooterNewsletterLastName',
(key:"LastName"});

As referenced in the JavaScript Integration Guide, the ltkAsyncListener should be used to ensure that the Listrak framework is loaded before your subscription point script executes.

COLLECT EMAIL ADDRESS OR PHONE NUMBER (SMS)

Initializing a subscription point requires the _ltk.Signup.New JavaScript Function Definition and each parameter that is listed below. Each subscription point function is unique, and on the website will replace “//SUBSCRIPTION CALLS GO HERE” which was installed in the Listrak JavaScript Integration. Follow the steps below to build the JavaScript Function Definition which when executed, will collect subscribers.

  1. Subscriber ID - The Subscriber ID parameter indicates which subscription point is being called. This was set up during Subscription Point Setup for SMS or Email.
  2. Form ID - The Form ID parameter indicates the ID of the field being captured. If no ID is present, the field name will be used. If no ID or name is available, a Javascript query selector may be used.
  3. Type - The Type parameter indicates when the submission of data will take place. For example, you could have data submit when a submit button is clicked, or you could set it to only submit on the next page load. (See below for Types)
  4. Button Selector - The Button Selector parameter indicates the button clicked to signify completion of the form. The button selector can be an ID, name, or query selector.
  5. Channel - The Channel parameter indicates what type of subscription data is being collected, is it a phone number for use in SMS marketing, or is it an email address for use in email marketing?

JavaScript Function Definition:

_ltk.Signup.New("SubscriberID", "FormID", Type, "buttonSelector", "channel");

Example of Function for SMS:

_ltk.Signup.New("Footer", "phonenumberfield", _ltk.Signup.TYPE.DEFAULT, "btnSubmit", "sms");

Example of Function for Email:

_ltk.Signup.New("Footer", "emailfield", _ltk.Signup.TYPE.DEFAULT, "btnSubmit", "email");

PARAMETER 1: SUBSCRIBER ID

Indicates which subscription point is being called. This was set up during Subscription Point Setup for SMS or Email.

_ltk.Signup.New("SubscriberID", "FormID", "Type", "buttonSelector", "channel");

  1. Copy Subscriber ID that was set up during Subscription Point Setup for SMS or Email.
  2. Navigate back to your website subscription point code editor.
  3. Paste it into the _ltk.Signup.New section surrounded by quotation marks and followed by a comma.
  • TIP: The Subscriber ID must appear the same way in the Listrak subscription point settings as it does on the site. This includes punctuation, spaces, and capitalization.

PARAMETER 2 : FORM ID

Indicates the ID of the field being captured. If no ID is present, the field name will be used. If no ID or name is available, a JavaScript query selector may be used.

_ltk.Signup.New('SubscriberID', 'FormID', Type, 'buttonSelector', 'channel');

  • TIP: It is important to make sure the Form ID is unique throughout the entire page so the Listrak code can identify this element on the page.

PARAMETER 3: TYPE

Indicates when the submission of data will take place. For example, you could have data submit when a submit button is clicked, or you could set it to only submit on the next page load.

_ltk.Signup.New("SubscriberID", "FormID", Type, "buttonSelector", "channel");

  • _ltkSignup.TYPE.DEFAULT - Used for any Subscription Point where the page posts back (refreshes when the submit button is clicked. (Usually used for footer and account create subscription Points)
  • _ltkSignup.TYPE.CHECKOUT - Only used for checkout subscription points. This allows submission to be triggered upon an order being successfully placed.
  • TIP: A button selector is not needed for this type. However, if specifying the channel (SMS/Email) when using the TYPE.CHECKOUT type, pass a blank value for the button parameter before the channel parameter.
  • _ltkSignup.TYPE.CLICK - Used for any subscription point where the page does NOT post back when the submit button is clicked. Often used for forms that use ajax calls.
  1. Determine which type of page is used on your site based on the above.
  2. Paste the Button Selector to the _ltk.Signup.New function after the Form ID, followed by a comma.
  • TIP: These do not need quotes around them, as they are placeholders for strings.

PARAMETER 4: BUTTON SELECTOR 

Indicates the button clicked to signify completion of the form. The button selector can be an ID, name, or query selector.

_ltk.Signup.New("SubscriberID", "FormID", Type, "buttonSelector", "channel");

  • TIP: Your submit button may not be an input tag as shown in the example above. Make sure the button ID or name is unique throughout the entire page to the Listrak code can identify this button on the page.

PARAMETER 5: CHANNEL

indicates what type of subscription data is being collected, is it a phone number for use in SMS marketing, or is it an email address for use in email marketing?

_ltk.Signup.New("SubscriberID", "FormID", Type, "buttonSelector", "channel");

  1. Copy Channel that was assigned during Subscription Point Setup for SMS or Email.
  2. Navigate back to your website subscription point code editor.
  3. Paste the Channel to the _ltk.Signup.New function after the Button Selector surrounded by quotation marks.
  • TIP: Channel is not case-sensitive.

COLLECT CUSTOMER PROFILE DATA

You can collect additional information a customer fills out when completing a subscription point form, such as First Name, Last Name, Birthday, Zip Code, etc. The Profile Field Mappings for each additional field were set up during Subscription Point Setup for SMS or Email. The_ltk.Signup.SetField function is used to collect the additional information. Follow the steps below to build the JavaScript Function Definition which when executed, will collect customer profile data.

  1. Subscriber ID - The Subscriber ID parameter indicates which subscription point is being called. This was set up during Subscription Point Setup for SMS or Email.
  2. ID - The ID parameter indicates the ID or Name of the field in which the customer data is entered.
  3. Options - The Options parameter indicates extra options needed for the data being entered. (See list below for current options.)
  4. Key - The Key parameter indicates the "key" to submit to Listrak. This is the value that needs to be mapped in Listrak. If none is defined the ID parameter will become the key.
  5. Value - The Value parameter indicates the "value" to submit to Listrak.

JavaScript Function Definition:

_ltk.Signup.SetField(SubscriberID, ID, Options);

_ltk.Signup.SetFieldWithKey(SubscriberID, ID, Key);

_ltk.Signup.SetValue_(SubscriberID, Key, Value);

The _ltk.Signup.SetField function is used to collect the additional information. The SetField call should be placed after the _ltk.Signup.New call of the related subscription point. 

1. Enter the _ltk.Signup.SetField code after the corresponding _ltk.Signup.New function.
2. Add the Subscription ID name in quotation marks, followed by a comma.

<script>
    (function(){if(typeof _ltk == 'object'){ltkCode();}else{(function (d) { if (document.addEventListener) document.addEventListener('ltkAsyncListener', d); else { e = document.documentElement; e.ltkAsyncProperty = 0; e.attachEvent('onpropertychange', function (e) { if (e.propertyName == 'ltkAsyncProperty') { d(); } }); } })(function(){ltkCode();});}function ltkCode(){_ltk_util.ready(function(){

_ltk.Signup.New("Footer", "newsletter", _ltk.Signup.TYPE.DEFAULT, "btnsubmit");
_ltk.Signup.New("AccountCreate", "email_address", _ltk.Signup.TYPE.DEFAULT, "submit");
     _ltk.Signup.SetField("AccountCreate", id, options);

    })}})();
</script>

3. Navigate to the website.
4. Locate the field with information you wish to collect.
5. Right click the text field.
6. Inspect the field.
7. Copy the ID.
8. Navigate back to your code editor.
9. Paste the ID to the _ltk.Signup.SetField code in quotation marks.

<script>
    (function(){if(typeof _ltk == 'object'){ltkCode();}else{(function (d) { if (document.addEventListener) document.addEventListener('ltkAsyncListener', d); else { e = document.documentElement; e.ltkAsyncProperty = 0; e.attachEvent('onpropertychange', function (e) { if (e.propertyName == 'ltkAsyncProperty') { d(); } }); } })(function(){ltkCode();});}function ltkCode(){_ltk_util.ready(function(){

_ltk.Signup.New("Footer", "newsletter", _ltk.Signup.TYPE.DEFAULT, "btnsubmit", "email");
_ltk.Signup.New("AccountCreate", "email_address", _ltk.Signup.TYPE.DEFAULT, "submit", "email");
     _ltk.Signup.SetField("AccountCreate", "firstname");

    })}})();
</script>

10. Navigate back to Listrak.
11. Then navigate from the home menu to Contacts.
12. Go to Subscription Points.
13. Edit the AccountCreate subscription point.
14. Navigate to the Profile Field Mappings.
15. Enter the ID of the field you got from step 7 for the Field Name.
16. Select CustomerInfo from the drop-down menu for the Field Group.
17. Select First Name from the drop-down menu for the Field.
18. Click Add Mapping.

Repeat steps 1 through 18 for each additional field you wish to collect. If you have birthday fields in your form, you will hook these up in the next section. When you’re finished, the code will look something like this:

<script>
    (function(){if(typeof _ltk == 'object'){ltkCode();}else{(function (d) { if (document.addEventListener) document.addEventListener('ltkAsyncListener', d); else { e = document.documentElement; e.ltkAsyncProperty = 0; e.attachEvent('onpropertychange', function (e) { if (e.propertyName == 'ltkAsyncProperty') { d(); } }); } })(function(){ltkCode();});}function ltkCode(){_ltk_util.ready(function(){

_ltk.Signup.New("Footer", "newsletter", _ltk.Signup.TYPE.DEFAULT, "btnsubmit", "email");
_ltk.Signup.New("AccountCreate", "email_address", _ltk.Signup.TYPE.DEFAULT, "submit", "email");
     _ltk.Signup.SetField("AccountCreate", "firstname");
     _ltk.Signup.SetField("AccountCreate", "lastname");
     _ltk.Signup.SetField("AccountCreate", "address");
     _ltk.Signup.SetField("AccountCreate", "state");
     _ltk.Signup.SetField("AccountCreate", "city");
     _ltk.Signup.SetField("AccountCreate", "zip");

    })}})();
</script>

COLLECTING DATE FIELDS

If you’re collecting information from a date field that uses three separate fields or drop-down menus (day, month, year) you must pass a custom key string to link to the date field in your segmentation. The code is as seen below:

Follow the below steps to collect date fields in Listrak: 

1. Enter the _ltk.Signup.SetDateFields code after the corresponding _ltk.Signup.New function.
2. Add the Subscription ID name, followed by a comma. 

3. Navigate to Listrak.
4. Navigate from the home menu to Contacts.
5. Go to Subscription Points.
6. Type birthdate for the Field Name.
7. Select CustomerInfo for the Field Group.
8. Select Birth Date for the field.
9. Click Add Mapping.
10. Copy the Field Name.

11. Navigate back to the code editor.
12. Paste the Field Name after the Subscriber ID, followed by a comma.

13. Navigate back to the website.
14. Locate the month field.
15. Right click and inspect.
16. Copy the ID.
17. Navigate back to the code editor.
18. Paste the ID after the key followed by a comma.

Repeat these steps for the day and year fields, if applicable. 

<script>
    (function(){if(typeof _ltk == 'object'){ltkCode();}else{(function (d) { if (document.addEventListener) document.addEventListener('ltkAsyncListener', d); else { e = document.documentElement; e.ltkAsyncProperty = 0; e.attachEvent('onpropertychange', function (e) { if (e.propertyName == 'ltkAsyncProperty') { d(); } }); } })(function(){ltkCode();});}function ltkCode(){_ltk_util.ready(function(){

_ltk.Signup.New("Footer", "newsletter", _ltk.Signup.TYPE.DEFAULT, "btnsubmit", "email");
_ltk.Signup.New("AccountCreate", "email_address", _ltk.Signup.TYPE.DEFAULT, "submit", "email");
     _ltk.Signup.SetField("AccountCreate", "firstname");
     _ltk.Signup.SetField("AccountCreate", "lastname");
     _ltk.Signup.SetField("AccountCreate", "address");
     _ltk.Signup.SetField("AccountCreate", "state");
     _ltk.Signup.SetField("AccountCreate", "city");
     _ltk.Signup.SetField("AccountCreate", "zip");
     _ltk.Signup.SetDateFields("AccountCreate", "birthdate", "dobMonth", "dobDay", "dobYear");

    })}})();
</script>

OPT-IN CHECKBOX FOR COMPLIANCE

Opt-in and opt-out checkboxes are used to indicate that a customer would like to receive marketing messages. Only one of these are necessary in the subscription point code. The SetOptIn option is used when the checkbox is checked to indicate a customer would like to receive marketing messages. The SetOptOut function is used when the checkbox is checked to indicate a customer would not like to receive marketing messages. 

To add opt-in or opt-out information to Listrak follow the below steps. 

  1. Enter _ltk.Signup.SetOptIn or _ltk.Signup.SetOptOutafter any SetField function for a subscription point.
  2. Add the Subscription Code name in quotation marks, followed by a comma.
  3. Navigate to the website.
  4. Right click the checkbox.
  5. Then inspect the checkbox. 
  6. Copy the ID.
  7. Paste the copied ID after the subscriber code.
<script>
    (function(){if(typeof _ltk == 'object'){ltkCode();}else{(function (d) { if (document.addEventListener) document.addEventListener('ltkAsyncListener', d); else { e = document.documentElement; e.ltkAsyncProperty = 0; e.attachEvent('onpropertychange', function (e) { if (e.propertyName == 'ltkAsyncProperty') { d(); } }); } })(function(){ltkCode();});}function ltkCode(){_ltk_util.ready(function(){

_ltk.Signup.New("Footer", "newsletter", _ltk.Signup.TYPE.DEFAULT, "btnsubmit", "email");
_ltk.Signup.New("AccountCreate", "email_address", _ltk.Signup.TYPE.DEFAULT, "submit", "email");
     _ltk.Signup.SetField("AccountCreate", "firstname");
     _ltk.Signup.SetField("AccountCreate", "lastname");
     _ltk.Signup.SetField("AccountCreate", "address");
     _ltk.Signup.SetField("AccountCreate", "state");
     _ltk.Signup.SetField("AccountCreate", "city");
     _ltk.Signup.SetField("AccountCreate", "zip");
     _ltk.Signup.SetDateFields("AccountCreate", "birthdate", "dobMonth", "dobDay", "dobYear");
     _ltk.Signup.SetOptIn("AccountCreate", "is_subscribed");

    })}})();
</script>

GUEST CHECKOUT

For your guest checkout or checkout subscription points your code may look something like this (make sure you’re using the correct IDs for your checkout form fields):

<script>
    (function(){if(typeof _ltk == 'object'){ltkCode();}else{(function (d) { if (document.addEventListener) document.addEventListener('ltkAsyncListener', d); else { e = document.documentElement; e.ltkAsyncProperty = 0; e.attachEvent('onpropertychange', function (e) { if (e.propertyName == 'ltkAsyncProperty') { d(); } }); } })(function(){ltkCode();});}function ltkCode(){_ltk_util.ready(function(){

_ltk.Signup.New("Footer", "newsletter", _ltk.Signup.TYPE.DEFAULT, "btnsubmit", "email");
_ltk.Signup.New("AccountCreate", "email_address", _ltk.Signup.TYPE.DEFAULT, "submit", "email");
     _ltk.Signup.SetField("AccountCreate", "firstname");
     _ltk.Signup.SetField("AccountCreate", "lastname");
     _ltk.Signup.SetField("AccountCreate", "address");
     _ltk.Signup.SetField("AccountCreate", "state");
     _ltk.Signup.SetField("AccountCreate", "city");
     _ltk.Signup.SetField("AccountCreate", "zip");
     _ltk.Signup.SetDateFields("AccountCreate", "birthdate", "dobMonth", "dobDay", "dobYear");
     _ltk.Signup.SetOptIn("AccountCreate", "is_subscribed");
_ltk.Signup.New("GuestCheckout", "checkout_email_address", _ltk.Signup.TYPE.DEFAULT, "checkoutsubmit", "email");
     _ltk.Signup.SetField("GuestCheckout", "checkoutfirstname");
     _ltk.Signup.SetField("GuestCheckout", "checkoutlastname");
     _ltk.Signup.SetField("GuestCheckout", "checkoutcity");
     _ltk.Signup.SetField("GuestCheckout", "checkoutzip");
     _ltk.Signup.SetField("GuestCheckout", "checkoutstate");
     _ltk.Signup.SetField("GuestCheckout", "checkoutcountry");
     _ltk.Signup.SetOptIn("GuestCheckout", "checkout_is_subscribed");

    })}})();
</script>

NOTE:

  • To maintain email subscription compliance, it is a good idea to include an opt-in newsletter option in your checkout process so customers have the option to sign up or not.
  • Make sure your field ID’s are different for AccountCreate and GuestCheckout like in the code above. If they can’t be unique, then just make sure you don’t include the checkout subscription point code on your account create page and vice versa. They must be unique so the Listrak subscription point knows what subscriber code to trigger for each subscription point.

Don’t forget to add any additional fields to your GuestCheckout subscription point in Listrak.

5. TESTING AND QUALITY CONTROL

After your subscription points are set up in Listrak and on your website, you are ready for testing. Please follow this section to ensure your subscription points are successfully subscribing contacts.

1. Navigate to the subscription points you set up on your website from the previous section in this guide.
2. Press F12 on your keyboard to bring up the browser’s developer console.

3. Click on the Network tab.
4. Type Listrak in the Filter text box.
5. Click the Preserve Log checkbox.
6. Enter your information in the subscription point text boxes.
7. Click submit.
8. If you see an S.ashx? call appear in the network tab, then your Listrak subscription code is working correctly.

9. You will also want to check for your email address in Listrak and make sure the additional fields and sources are getting collected correctly.
10. You should also check that you are not getting subscribed if you don’t check the opt-in box.

If your subscription point tests were unsuccessful, send an email to success@listrak.com  and we’ll be happy to troubleshoot with you.

SETTING UP AN UNSUBSCRIPTION POINT

Initializing an unsubscription point requires the _ltk.Signup.Remove function that is listed below. The unsubscription point works similarly to _ltk.Signup.New, but instead of subscribing a contact to a list, it unsubscribes them. The list that the contact is unsubscribed from is determined by the subscription point in Listrak (Solutions > Subscription Points).

_ltk.Signup.Remove("subscriberID", "emailfield", TYPE, "buttonSelector", "Channel");

Did this answer your question?