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:
Website integration is complete and the Javascript Framework is installed.
If integrating a checkout subscription point: order collection code is installed
GCPR and CCPA Compliance has been considered.
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 article here.
Email Subscription Points are set up (if needed)
SMS Subscription Points are set up (if needed)
Once the following have been completed, you can proceed to the Subscription Point Website Integration. In this section you will build the JavaScript Function Definition that Listrak uses to record the subscription and additional profile information from the form.
Subscription Point Website Integration
Listrak's 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', 'FooterNewsletterFirstName',
{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 SMS Phone Number
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.
The following components are part of the JavaScript Function Definition:
Parameter | Accepted Value | Description |
Subscriber ID | String | |
ID | ID name query selector as string | The Form ID parameter indicates the ID of the field being captured. |
Type | TYPE.DEFAULT TYPE.CHECKOUT TYPE.CLICK | 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. |
Button | ID name query selector as string | The Button Selector parameter indicates the button clicked to signify completion of the form |
Channel | SMS | The Channel parameter indicates what type of subscription data is being collected |
Type Functionality:
_ltk.Signup.TYPE.DEFAULT - Used for any Subscription Point where the page posts back (refreshes when the submit button is clicked.) This is often used for footer and account create subscription Points.
_ltk.Signup.TYPE.CHECKOUT - Only used for checkout subscription points. This allows submission to be triggered upon an order being successfully placed.
💡 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.
_ltk.Signup.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.
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");
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. The SetField call should be placed after the _ltk.Signup.New call of the related subscription point.
Below are the components used to build the JavasScript function definition:
Parameter | Accepted Value | Description |
Subscriber ID | String | |
ID | ID name query selector as string | The Form ID parameter indicates the ID of the field being captured. |
key | String | 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. |
Value | ["value"|"text"] ["checked"|"value"] | Determines the specific value that is submitted to Listrak |
JavaScript Function Definition:
_ltk.Signup.SetField(SubscriberID, ID, Options);
_ltk.Signup.SetFieldWithKey(SubscriberID, ID, Key);
_ltk.Signup.SetValue(SubscriberID, Key, Value);
When defining a value you can determine what is passed to Listrak based on the format of the value being collected.
Options | Choices | Description |
dropdown | ["value"|"text"] | Determines if the dropdown's value or text is captured. The value is captured by default. |
radio | ["checked"|"value"] | Determine's if the radio button's individual property (on/off) or the group's value is captured. Checked is used by default. |
Below is an example of the code with placeholder data and code with the values corresponding to an email subscription point in Listrak.
<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>
<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>
Below is an an example of a subscription point collecting multiple pieces of information.
<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 should be placed below the _ltk.Signup.New call for the same data.
Repeat these steps for the day and year fields, if applicable. Below is an example of an email subscription point collecting multiple profile fields and the birthdate date field.
<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 and Opt-Out Checkboxes for Compliance
An opt-in or opt-out checkbox is used to indicate that a customer would like to receive marketing messages. Only one of these is 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 email messages.
⚠️ When integrating an SMS an opt-in checkbox must be used. The box cannot be pre-checked.
JavaScript Function Definition:
_ltk.Signup.SetOptIn(SubscriberID, ID);
_ltk.Signup.SetOptOut(SubscriberID, ID);
Parameter | Accepted Value | Description |
Subscriber ID | String | |
ID | ID name as string | The Form ID of the checkbox being captured for opt in or opt out. |
Below is an example of a subscription point that includes an opt in.
<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>
Member Checkout and Guest Checkout
For your guest checkout or member 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.
Testing
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 [email protected] 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.
_ltk.Signup.Remove("subscriberID", "emailfield", TYPE, "buttonSelector", "Channel");