STEP 1: INSTALL THE LISTRAK APP

  1. From within your Big Commerce admin panel, go to Apps.
  2. Search for Listrak on the right-hand side of the navigational pane.
  3. Select the Listrak Retail Solutions app.
  4. Click Install (you must be logged in as a store owner to install).
  5. Confirm access to your store.
  6. Once installed, follow the prompt to input your [Listrak-provided] Merchant ID:
  • NOTE: This can also be found within the Listrak Application under Solutions > Integrations > Bigcommerce. This integration will soon be in Listrak's Integration Marketplace!

6. Once submitted, you should see the following message: You have installed the Listrak app in your store (v7239v) but data import is DISABLED.

7. Within your Listrak account, navigate to Solutions > Integrations > Bigcommerce.

8. Click Enable Data Import to verify the attempt to sync to your store import data.

The Data import should then switch to ENABLED, and the Listrak app will now automatically collect Product, Customer, and Order information from your BigCommerce store.

STEP 2: APPLY LISTRAK'S JAVASCRIPT FRAMEWORK

The script block referred to as Listrak’s Javascript Framework is a segment that builds the core foundation used by every Listrak service. 

  1. Insert the JavascriptFramework. This script block needs to load at the bottom of Footer.html, which can be edited under the Panels group in the Other TemplateFiles section of Design mode.
  • NOTE: Be sure to replace <<MERCHANT_ID>> and <<VERSION>> in the below code with your unique Merchant ID and Version.
<!-- Listrak Analytics – Javascript Framework -->
<script type="text/javascript">
        var biJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
        (function (d, s, id, tid, vid) {
            var js, ljs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;
            js.src = biJsHost + "cdn.listrakbi.com/scripts/script.js?m=" + tid + "&v=" + vid;
            ljs.parentNode.insertBefore(js, ljs);
        })(document, 'script', 'ltkSDK', '<<MERCHANT_ID>>', '<<VERSION>>');
</script>

2. Once added, be sure to save the Footer.html.

3. Click Tracking will be fired on every page except /finishorder.php.

4. Page Browse Tracking will fire on non-product pages.

5. Product Browse Tracking will fire on product pages. Additionally, selecting a product variant or ‘quick-viewing’ a product will fire Product Browse Tracking. 

CAPTURING EMAIL ADDRESS

One of the most critical components of a successful Shopping Cart Abandonment program is the ability to reach the user who abandons a cart. The Listrak integration established in Step 1 will automatically capture email addresses submitted on the login form, newsletter form, and checkout page.

DEVELOPER TOOLS

GOOGLE CHROME

  1. Hit F12, Ctrl + Shift + I, or select the menu options Tools > Developer Tools.
  2. Hit the Network button.

3. Click the Filter icon.

4. Enter Listrak to help find the various network calls.

5. You will see a red icon, please ensure this is red to capture network traffic.

FIREFOX

1. Hit F12, Ctrl + Shift + Q, or select the menu options Developer > Network.
2. Hit the Network button.

3. Hit HTML and JS to help filter the results.   

4. Selecting a response will open the Headers window to the right. Click Params for easier viewing.

INTERNET EXPLORER

1. Hit F12, or select the gear icon: Developer > F12 Developer tools.
2. Select the Network icon.

3. Make sure to hit the play button.  
4. Locate the request and double click to view detailed information.

Did this answer your question?