Adding the subscription point code to your site allows anyone who submits their email address to be subscribed to your marketing list. Collecting additional information such as first name, last name, and interest allows you to segment your marketing messages to further enhance your customer experience.

Before you begin, confirm you have completed the following two steps: 

  1. Integration is complete and the Javascript Framework is installed on your site. 
  2. If hooking up a checkout subscription point: order collection code is installed on your site. 

1. COMPLIANCE

In the following sections of this article, you will be adding code to your website to connect your subscription points with Listrak to get subscribers on your marketing list. This code will also implicitly capture email addresses and browsing session data for use with other Listrak solutions such as Browse Abandonment, Shopping Cart Abandonment, and Recommendations. 

To help our clients with GDPR compliance, Listrak offers a code option to pass a visitor’s consent status. If you pass the consent 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. CREATE SEGMENTATION FIELDS 

You have the option of creating segmentation fields to track the source of your subscribers as well as additional info about them for personalization and targeting. If you would like to do this, follow the steps below.

1. Select the Master List from the list drop-down menu.
2. Navigate from the home menu to Contacts.
3. Go to Segmentation.
4. Then Modify Existing Field Group.
5. Select the CustomerInfo Field Group.
6. Create the following fields under the CustomerInfo group if they do not already exist:

For example, Enter First Name for the Field Name. Select the Text Data Type.

If there are additional fields that you would like to capture in Listrak from the subscription point forms on your website, add those fields as well.

7. Navigate from the home menu Contacts.
8. Go to Segmentation.
9. Then Modify Existing Field Group.
10. Select Source for the Field Group.
11. If your source does not already exist, you can create a source checkbox for each of your subscription points. Below are a couple common website subscription point sources.

3. LISTRAK CONFIGURATION

After your external events and segmentation fields are created, the next step is to create the subscription points and assign them to a list. In the following example, we’ll be working through a footer subscription point. Please select the source that is relative to the subscription point that you’re setting up.

1. Navigate from the home menu to Solutions.
2. Go to Subscription Points.
3. Click Add New.
4. Select the appropriate Merchant, if applicable.
5. Enter Footer for the Subscription Code.
6. Enter a Description.
7. Select your Master List for the Subscriber List.
8. If your business requires the use of Double Opt-In functionality, set the option to On.

9. Double opt-in will not subscribe contacts through this subscription point until the contact confirms their subscription by clicking on the confirmation link in the double opt-in message that they receive. You can view and customize the double opt-in message by navigating to Authoring then System Messages.

10. If you would like to resubscribe contacts that are currently unsubscribed when they submit their email on this subscription point, set the Override Unsubscribe option to On.

10. Navigate to the Profile Field Mappings section.
11. Enter ltkSource for the Field Name.
12. Select the Source Field Group from the drop-down menu
13. Select the Footer Field.
14. Click Add Mapping.

NOTE: This will mark your subscribers with the source of Footer when they subscribe through this subscription point on your website.

15. Click Save Settings at the bottom of the page.
16. Follow the above instructions for the rest of the subscription points that you would like to set up.

NOTE: Make sure you set the Subscription Code, and Source correctly for each subscription point you set up.

Your result should look something like this:

4. WEBSITE CONFIGURATION

GETTING STARTED

You should have previously installed this code on every page of your website if you’ve already integrated with Listrak. Please locate this code on your website, as you will be inserting additional code snippets where it says //SUBCSRIPTION CALLS GO HERE in the following sections of this guide.

<script>
    (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 () {

//SUBSCRIPTION CALLS GO HERE        

    });
</script>

SETTING UP A SUBSCRIPTION POINT

Initializing a subscription point requires the _ltk.Signup.New function that is listed below. Each subscription point created has its own unique _ltk.Signup.New function. The _ltk.Signup.New functions for your specific subscription points replaces “//SUBSCRIPTION CALLS GO HERE” in the code you added in the last step. This code will later be customized to collect additional information.

ELEMENTS OF SUBSCRIPTION POINT CODE

To call the _ltk.Signup.New function, you will need to include four elements:

FOOTER

Follow the below steps to add each element to the _ltk.Signup.New function.

SUBSCRIBER CODE  

1. Navigate from the home menu to Solutions.
2. Go to Subscription Points.
3. Copy Footer from the Subscriber Code column.

4. Navigate back to your website subscription point code editor.
5. Paste it into the _ltk.Signup.New section surrounded by quotation marks and followed by a comma as seen in yellow below.

NOTE: The subscriber code must appear the same way in the Listrak subscription point settings as it does on the site. This includes punctuation, spaces, and capitalization.

EMAILID

1. Navigate to the website.
2. Locate the email input field.
3. Click the text field.
4. Right click and inspect.
5. Copy the ID.

6. Navigate back to the code editor.
7. Paste the ID it after the Subscription Code surrounded by quotation marks and followed by a comma.

NOTE: It is important to make sure the email ID or name of your footer textbox is unique throughout the entire page so the Listrak code can identify this element on the page.

TYPE

NOTE: These do not need quotes around them, as they are placeholders for strings.

1. Determine which type of page is used on your site based on the chart above.
2. Add the type to the _ltk.Signup.New function after the EmailID, followed by a comma.

BUTTON SELECTOR 

1. Navigate to the website.
2. Locate the button or element that submits the form.
3. Click the text field.
4. Right click and inspect.
5. Copy the ID.

6. Navigate back to the code editor.
7. Paste the ID to the _ltk.Signup.New function after the type, followed by a comma.

NOTE: 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.

At this point, the JavaScript subscription point code should look something like this:

<script>
    (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 () {

_ltk.Signup.New(“Footer”, “newsletter”, _ltk.Signup.TYPE.DEFAULT, “btnsubmit”);

    });
</script>

ACCOUNT CREATE

You will want to follow the same methods to identify and set up the subscription JavaScript code as you did for your footer. If you don’t have or would like to not hook up your Account Create page to Listrak, you may move on to the next section. Your resulting code will look something like this:

<script>
    (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 () {

_ltk.Signup.New(“Footer”, “newsletter”, _ltk.Signup.TYPE.DEFAULT, “btnsubmit”);
_ltk.Signup.New(“AccountCreate”, “email_address”, _ltk.Signup.TYPE.DEFAULT, “submit”);

    });
</script>

You can collect additional information a customer fills out when completing a subscription point form, such as name, address, and zip code. The profile field mappings for each additional field must be created in the subscription point mappings prior to adding the code. 

ELEMENTS OF SETTING ADDITIONAL FIELDS

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 Code name in quotation marks, followed by a comma.

<script>
    (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 () {

_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 (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 () {

_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”, “firstname”);

    });
</script>

10. Navigate back to Listrak.
11. Then navigate from the home menu to Solutions.
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 (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 () {

_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”, “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 Code name, followed by a comma. 

3. Navigate to Listrak.
4. Navigate from the home menu to Solutions.
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 code, 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 (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 () {

_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”, “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.SetOptOut after 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 (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 () {

_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”, “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 (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 () {

_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”, “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”);
     _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 emailID’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.

Did this answer your question?