Register

Ηow can I install website tracking by using the JS tracking library ?

Moosend gives you the option to add code snippets on your website's HTML so that you can track that actions of your website visitors and use those as triggers for your automations. If your website is based on a CMS or a e-commerce platform you can use one of our practical plugins to achieve website tracking with just one click.

Both the unique code snippets and our plugins, around which the tracking functionality is based, are readily available right inside your Moosend account.

Below you'll find some examples of what the tracking code looks like as well as different configuration examples of how you can track different types of actions on your site by adding the code snippets to different areas of your site.

Let's get right to it:


A. Installing the JS Tracking Library


To install the library, just paste the following code into the <head> section of your HTML master / template page.

1. Add the code-snippet below to load the tracker. 

//load TrackerJS
!function(t,n,e,o,a){function d(t){var n=~~(Date.now()/3e5),o=document.createElement(e);o.asyn c=!0,o.src=t+"?ts="+n;var a=document.getElementsByTagName(e)[0];a.parentNode.inse rtBefore(o,a)}t.MooTrackerObject=a,t[a]=t[a]||function( ){return t[a].q?void t[a].q.push(arguments):void(t[a].q=[arguments])},window .attachEvent?window.attachEvent("onload",d.bind(this,o) ):window.addEventListener("load",d.bind(this,o),!1)}(window,document,"script","//cdn.stattrack.com/statics/moosend-tracking.min.js","mootrack");

 

2. Add the code snippet below to initialize the tracker, so that it can gather tracking events. 

//tracker has to be initialized otherwise it will generate warnings and wont send tracking events
mootrack('init', '12A3B4C5-6D78-90EF-12345678GH901IJ2');

Make sure that the last part of the code contains your unique identifier, which will look something like this:


12A3B4C5-6D78-90EF-12345678GH901IJ2


B. Identifying Visitors

The identify call lets you connect a user to their actions and subsequently record their traits. It includes a unique email and any optional traits you retain about them (e.g. their name, location, etc).  In regards to when and how often you should call the identification process remember the following two recommendations:

  • After a user registers
  • After a user logs in


Calling identify is super simple and it allows you to identify a user via their email, along with any other properties that you wish to include. Here's an example: 

// identify with email
mootrack('identify', 'john@doe.com');

// identify with email and name
// commented out as you need to choose one of these calls only
//mootrack('identify', 'john@doe.com', 'John Doe');

// identify with email name and optional properties
// commented out as you need to choose one of these calls only
//mootrack('identify', 'john@doe.com', 'John Doe', {'Location': 'Athens'});

 

C. Tracking Page View Events

You can track page view events by issuing the track page view call on the Moosend tracker library. It is highly recommended that you add this event inside the <head> section of your HTML master / template page, after the library initialization. To do this simply add the code-snippet below:

// track a view of the current page
mootrack('trackPageView');

 

D. Tracking Add to Cart Events

Among the available e-commerce tracking options, one of the most popular ideas is to track when someone adds an item to their cart and then moves ahead with purchasing it; such events can be used to implement "Abandoned Cart" emails! To achieve this type of tracking you will need the following tracking code. 

//send added to order events

// mandatory - a unique code for the product, like its SKU
var itemCode = 'COW-T-SHIRT';
// mandatory - the price of this product
var itemPrice = 12.02;
// mandatory - the url to get to the relevant product page
var itemUrl = 'http://your.store/product-101';
// mandatory
var itemQuantity = 2;
// mandatory - the total price for purchasing the given quantity of this product
var itemTotalPrice = 24.04;
// mandatory - the name / title of this product
var itemName = 'Cow T-Shirt'; // mandatory
// mandatory - the image url of this product
var itemImage = 'http://your.store/product-color-blue.jpg';
// optional - the category of this product
var itemCategory = 'T-Shirts';
// optional - the manufacturer, brand name or company / owner of this product (if any)
var itemManufacturer = 'Acme Co';

// you can add custom properies and later use them in segmentations or automations
// You can track things like the category or the manufacturer of the t-shirt in this case
var extraProps = {
   itemCategory: itemCategory,
   itemManufacturer: itemManufacturer

};

// Tracking add to cart events with mandatory arguments mootrack('trackAddToOrder', itemCode, itemPrice, itemUrl ,itemQuantity);

// Tracking add to cart events with mandatory arguments + optional mootrack('trackAddToOrder', itemCode, itemPrice, itemUrl, itemQuantity, itemTotalPrice, itemName, itemImage, extraProps);


E. Tracking Order Completed Events

Another efficient e-commerce tracking concept is to track whenever someone finalizes their order with success. You can then use such an event to implement "Purchase Completed" follow-up emails. You will need to add the following tracking code to track when someone successfully completes an order.

// send order completed events

var product1 = {
   // mandatory - a unique code for the product, like its SKU
   itemCode: 'COW-T-SHIRT',
   // mandatory - the name / title of this product
   itemName: 'Cow T-Shirt',
   // mandatory - the image url of this product
   itemImage: 'http://your.store/product-color-blue.jpg',
   // mandatory - the price of this product
   itemPrice: 12.02,
   // mandatory - the url to get to the relevant product page
   itemUrl: 'http://your.store/product-101',
   // mandatory
   itemQuantity: 2,
   // mandatory - the total price for purchasing the given quantity of this product     
itemTotalPrice: 24.04,
   // optional - the category of this product
   itemCategory: 'T-Shirts',
   // optional - the manufacturer, brand name or company / owner of this product (if any)
   itemManufacturer: 'Acme Co'
};

// Products should be an array with an object like product.
var products = [product1, product2, ....];
mootrack('trackOrderCompleted', products);

 

F. Tracking Product View Events

You can track when a user views a product (before adding to cart or purchasing). This event helps to implement advanced re-targetting strategies like browse abandonment and engage with your recipients if they view but not purchase a product. You will need to add the below tracking code whenever a user views a product.  

product1 = {
// mandatory - a unique code for the product, like its SKU
itemCode: 'COW-T-SHIRT',
// mandatory - the name / title of this product
itemName: 'Cow T-Shirt',
// mandatory - the image url of this product
itemImage: 'http://your.store/product-color-blue.jpg',
// mandatory - the price of this product
itemPrice: 12.02,
// mandatory - the url to get to the relevant product page
itemUrl: 'http://your.store/product-101',
// optional - the category of this product
itemCategory: 'T-Shirts',
// optional - the manufacturer, brand name or company / owner of this product (if any) itemManufacturer: 'Acme Co' };
// Product should be sent back as an array with an object like the product above var

products = [product1]; mootrack('PAGE_VIEWED', products);

  

G. Tracking Custom Events

Any event which you need to track only requires a single line of code! To this end, let's track a simple "Video played" event as an example - you can follow the same premise to track events which are highly relevant to your business.

Keep in mind that you can also track custom properties, like "length" and "id" in the case of our "Video Played" example. Such properties describe the event you are tracking or the user who triggered the event. You can include your own properties by passing them in an object as the second argument to mootrack:

mootrack('Video Played', { "Video length": 123, "id": "h17gQr0" });

Add your event tracking code to the page and refresh.