You are here: Pleisty > Docs


Installing the Pleisty JavaScript Tracker


This tutorial will guide you through installing the Pleisty tracker code into your shop. Once installed, the tracker will allow Pleisty to:

  1. Track your your users' behavior on your shop
  2. Send your users personalized messages via email and other channels
  3. Show personalized content to your users in real time, while they navigate the shop

Install all components of the code documented in this page and be sure to let us know if you need any help along the way.

1. Installing the Base Tracker Code

The base tracker is the core tracking component of Pleisty. Please add it to the <HEAD> section of all your shop's pages, populating the site_hash variable with the value received from your account manager.

<script type="text/javascript">
  (function() {
    var site_hash = "GET YOUR ID FROM PLEISTY SUPPORT"; 
    var domain = "pleisty.com"
    var ldr = document.createElement('script'); 
    ldr.type = 'text/javascript'; ldr.async = true;
    ldr.src = document.location.protocol + '//tr-' + 
              site_hash.substr(2) + '.' + domain + '/tracker/load/' + 
              site_hash + '/tracker.js?_=' + (+new Date);
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ldr, s);
  })();
</script>

Recommendations:

2. Using the Helper Widget to Verify Tracked Events

When the base tracker code is correctly installed, it can be used to activate a feature named ”helper widget” that lets you visualize the tracked events. Activate the helper widget by loading any page of your shop adding an extra query string parameter, PleistyHelperWidget=1, such as in:

http://www.example.com?PleistyHelperWidget=1

If the tracker code is installed correctly you'll see the helper widget displayed in the upper left part of the page.

Clicking the View details link will open a pop-up window showing the last five pageviews with their parameters as recorded by the tracker. The following image shows an example with the details of a shopping cart pageview.

You can also double-check the tracked events from the server-side by logging in into your Pleisty dashboard and selecting the Site Health link from the left pane:

3. Identifying Users

When you know the ID of the current visitor, please add the following script next to the base tracker code to pass the ID to Pleisty. At the same time specify whether the user is logged in by populating the customer_logged parameter.

<script type="text/javascript">
  var _pleistyq = _pleistyq || [];
  _pleistyq.push(['customer_id', 'CUSTOMER ID HERE']);
  _pleistyq.push(['customer_logged', 'true/false']);
</script>

When you know additional attributes of the current user (like email address, first name, last name, current subscriptions, others), execute the following identify call to pass those attributes as well. For example, if a user signs up for an account or subscribes to a newsletter on your site, you may want to set their email address in our system. Alternatively, you can pass this data through a separate users feed.

<script>
  var _pleistyq = _pleistyq || []
  _pleistyq.push(["custom_event","identify",{
    "customer_id": "same as customer_id call", 
    "email": "some@example.com", 
    "first_name": "John", 
    "last_name": "Smith", 
    "name": "John Smith", 
    "newsletter1subscriber": true, 
    "other": "attribute", 
    //....
  }])
</script>

4. Identifying Page Types

To help the Pleisty tracker correctly identify the types of tracked pages, add the following code snippet populating the page_type variable with the the type of page on which the tracker loads.

<script>
  // Please add this script to identify known page types
  var _pleistyq = _pleistyq || [];
  _pleistyq.push(['page_type', 'CHECK DOCUMENTATION FOR VALID VALUES']);
</script>

The possible values of page_type are the following:

value of page_type corresponding page
homepage the shop's homepage
product product pages
product_listing category and search pages
shopping_cart shopping cart pages
checkout_in_progress checkout pages
checkout_finalized order confirmation pages
pseudo_checkout checkout substitute pages such as Contact Seller (only for sites that have no real checkout pages such as classifieds sites)
other_content non-product content pages such as articles and blog entries

After adding the code, you can use the helper widget to verify that Pleisty receives the page_type data correctly.

5. Tracking Shopping Cart Events

Please add the following code to any event that can affect the cart, including:

This is necessary for accurate tracking of the visitor's shopping cart. After adding the code, please use the helper widget to verify that Pleisty receives the cart data correctly.

<script>
  // Please add this script to any pages that modify the shopping cart
  var _pleistyq = _pleistyq || [];
  _pleistyq.push(['cart', [
      {
        'url': 'http://url_of_the_item', // Product URL
        'item_id': 'product ID or SKU', // Product ID or SKU (optional)
        'qty': 'product quantity', // Quantity
        'price': 'product price', // Price per unit (float)
        'currency': 'currency code' // The currency used for price Ex: USD
      }, 
      {
        'url': 'http://url_of_the_item', // Product URL
        'item_id': 'product ID or SKU', // Product ID or SKU (optional)
        'qty': 'product quantity', // Quantity
        'price': 'product price', // Price per unit (float)
        'currency': 'currency code' // The currency used for price Ex: USD
    }, 
  // ... other items
  ]]);
</script>

If the cart is empty please make sure that the code returns empty value:

<script>
  var _pleistyq = _pleistyq || [];
    // For every time when the cart is empty
    _pleistyq.push(['cart', []]);
</script>

6. Tracking Conversions

To enable tracking of checkout events, please add the following code to your checkout-finalized pages, populating the variables with the transaction data as indicated. After implementation, please use the helper widget to verify that Pleisty receives the cart data correctly.

<script>
  // Please add this script to your checkout-finalized pages
  var _pleistyq = _pleistyq || [];
  _pleistyq.push(['checkout_finalized',{
    'transaction_id': 'unique_transaction_id', // Transaction ID
    'total': 'amount', // Total amount of the finalized transaction
    'currency': 'currency code' // The currency used for total amount Ex: USD
    'items': 
    [
      // for every item purchased
      {
      'url': 'http://url_of_the_item', // Product URL
      'item_id': 'product ID or SKU', // Product ID or SKU (optional)
      'qty': 'product quantity', // Quantity
      'price': 'product price', // Price per unit (float)
      'currency': 'currency code' // The currency used for price Ex: USD
      }
    //, { ... next item
    ]
  }]);
</script>

7. Tracking Product Pageviews

Please add the following script to each product page, populating the product_id variable with the ID of the product being loaded. The value must be the same as the ID received via the products feed.

<script>
  // Please add this script to your product pages
  var _pleistyq = _pleistyq || [];
  _pleistyq.push(['product_id', 'YOUR_PRODUCT_ID']);
</script>

8. Tracking Category Pageviews

Please add the following script to each category page, populating the cat variable with the name of the category being displayed. The value must be the same as the category names in products feed.

<script>
  // Please add this script to your category pages
  var _pleistyq = _pleistyq || [];
  _pleistyq.push(['cat', 'YOUR_CAT1']); // for level 1 category
  _pleistyq.push(['cat', 'YOUR_CAT1', 'YOUR_CAT2']); // for level 2 category   
  _pleistyq.push(['cat', 'YOUR_CAT1', 'YOUR_CAT2', 'YOUR_CAT3']); // for level 3 category
</script>

9. Tracking Wishlist Events

If your implementation needs tracking of wishlists, use the code below to push these events to Pleisty.

<script>
  // Please add this script to your checkout-finalized pages
  var _pleistyq = _pleistyq || [];
  _pleistyq.push(['wishlist',{
    'wishlist_id': 'unique_wishlist_id', // An identifier for the wishlist, ex. "Favorites"
    'items': 
    [
      // for every item in the wishlist
      {
      'url': 'http://url_of_the_item', // Product URL
      'item_id': 'product ID or SKU', // Product ID or SKU (optional)
      'qty': 'product quantity', // Quantity (optional)
      'price': 'product price' // Price per unit (float) (optional)
      }
    //, { ... next item
    ]
  }]);
</script>

10. Tracking Product Searches

If your implementation needs tracking of product searches, use the code below in your search pages to push these events to Pleisty.

<script>
  // Please add this script to your search pages
  var _pleistyq = _pleistyq || [];
  // Push the searched keyword
  _pleistyq.push(['search_kw', 'THE SEARCH KW']);
  // Push the filters used 
  _pleistyq.push(['filters', [
    ["brand","in",["Brand A", "Brand B"]],
    ["price","lt",1000],
    ["price","gt",100],
    ["color","eq","red"],
    ["cat", "in", [
      ["CatA1", "CatA2"],
      ["CatB1", "CatB2", "CatB3"],
     ]]
  ]]);
</script>

11. Tracking Custom Events

If your implementation needs tracking of custom events, use the code below to push these events to Pleisty.

<script>
  // Use this script to push custom events to Pleisty
  var _pleistyq = _pleistyq || [];
  _pleistyq.push(["custom_event","EVENT VALUE"])
</script>




Questions about installing Pleisty?
Get in touch