How to add Stormize to my web site ?

Last updated over 6 years ago

If you use Shopify, please refer to the Shopify installation guide.

Manual installation of Stormize

Stormize requires javascript code snippet to collect your visitor behavior. 
We've created multiple codes for each specific action. Please find below these tracking codes and the instruction for a quick integration.
All our tracking codes below can be added either at the end of the <body> tag or <head> tag.
You can also add them easily in your tag management system, like Google Tag manager.

Category tag

This tag lets Stormize know what category (product listing page) your visitors are seeing.
You need to add it to all your category pages.

(function(a) {
   var b = document.createElement("script");b.type = "text/javascript";b.readyState ? b.onreadystatechange = function() {
      if ("loaded" === b.readyState || "complete" === b.readyState) b.onreadystatechange = null, a()} : b.onload = function() {a()};
   b.src = "//cdn.stormize.com/framework/{client_id}.js"; document.getElementsByTagName("head")[0].appendChild(b)
})(function() {
   var Stormize_Data_Layer = {
      'type' : 'category',
      'id' : '{category_id}',
      'name' : '{category_name}'

   };

   StormizeTrack( Stormize_Data_Layer );
});
You need to replace :
  • {client_id} by your Stormize client id (you can find in your setting page). For example: 12345.
  • {category_id} by the id of the current category. If you don't have this information, you can leave it blank (empty string). For example: t-shirt_women
  • {category_name} by the name of the current category. If you don't have this information, you can leave it blank (empty string). For example: Our T-Shirt For Women

Product tag

This tag lets Stormize know what product your visitors are seeing.
You need to add it to all your product pages.

(function(a) {
   var b = document.createElement("script");b.type = "text/javascript";b.readyState ? b.onreadystatechange = function() {
      if ("loaded" === b.readyState || "complete" === b.readyState) b.onreadystatechange = null, a()} : b.onload = function() {a()};
   b.src = "//cdn.stormize.com/framework/{client_id}.js"; document.getElementsByTagName("head")[0].appendChild(b)
})(function() {
   var Stormize_Data_Layer = {
      'type' : 'product',
      'product_id' : '{product_id}',
      'variation_id' : '{variation_id}',
      'currency' : '{currency}',
      'price': {price},
      'name' : '{name}',
      'brand' : '{brand}',
      'category_id_1' : '{category_id_1}',
      'category_id_2' : '{category_id_2}',
      'image' : '{image}'
   };

   StormizeTrack( Stormize_Data_Layer );
});
You need to replace :
  • {client_id} by your Stormize client id (you can find in your setting page). For example: 12345.
  • {product_id} by the id of the current product. For example: pid-123
  • {variation_id} by the id of the variation of the product. If you don't have this information, you can leave it blank (empty string). For Example: pid-123-1
  • {currency} by the ISO code of the user's currency. If you don't have this information, you can leave it blank (empty string). For Example: USD
  • {price} by the price of the product. For example: 231.12
  • {name} by the name of the current product. For example: Rock Black T-shirt for women
  • {brand} by the name of the brand. If you don't have this information, you can leave it blank (empty string). For example: Strawberry Shirts
  • {category_id_1} by an id of a category for this product (same ID you sent in the category tag above). If you don't have this information, you can leave it blank (empty string). For example: t-shirt_women
  • {category_id_2} by an id of a category for this product (same ID you sent in the category tag above). If you don't have this information, you can leave it blank (empty string). For example: women_clothes
  • {image} by the url of the image. If you don't have this information, you can leave it blank (empty string). For example: https://shop.stormize.com/images/t-shirt_women.png

Funnel tag

This tag lets Stormize know how advanced is the user in your checkout process.
You need to add it to all checkout process pages (basket, delivery information, payment, etc.).

(function(a) {
   var b = document.createElement("script");b.type = "text/javascript";b.readyState ? b.onreadystatechange = function() {
      if ("loaded" === b.readyState || "complete" === b.readyState) b.onreadystatechange = null, a()} : b.onload = function() {a()};
   b.src = "//cdn.stormize.com/framework/{client_id}.js"; document.getElementsByTagName("head")[0].appendChild(b)
})(function() {
   var Stormize_Data_Layer = {
      'type' : 'funnel',
      'step_name' : '{step_name}',
      'step' : '{step}'
   };

   StormizeTrack( Stormize_Data_Layer );
});
You need to replace :
  • {client_id} by your Stormize client id (you can find in your setting page). For example: 12345.
  • {step_name} by the name of the current step. If you don't have this information, you can leave it blank (empty string). For example: Payment information
  • {step} by order of the current step (between 1 to 10). For example: 3 (if the user is at the third step of your checkout process).


Add to cart tag

This tag lets Stormize know when a user adds a product to his basket.
You need to trigger it every time a user add a product to cart.

(function(a) {
   var b = document.createElement("script");b.type = "text/javascript";b.readyState ? b.onreadystatechange = function() {
      if ("loaded" === b.readyState || "complete" === b.readyState) b.onreadystatechange = null, a()} : b.onload = function() {a()};
   b.src = "//cdn.stormize.com/framework/{client_id}.js"; document.getElementsByTagName("head")[0].appendChild(b)
})(function() {
   var Stormize_Data_Layer = {
      'type' : 'addToBasket',
      'product_id' : '{product_id}',
      'variation_id' : '{variation_id}',
      'currency' : '{currency}',
      'count' : '{count}',
      'value' : '{value}'

   };

   StormizeTrack( Stormize_Data_Layer );
});
You need to replace :
  • {client_id} by your Stormize client id (you can find in your setting page). For example: 12345.
  • {product_id} by the id of the current product. For example: pid-123
  • {variation_id} by the id of the variation of the product. If you don't have this information, you can leave it blank (empty string). For Example: pid-123-1
  • {currency} by the ISO code of the user's currency. If you don't have this information, you can leave it blank (empty string). For Example: USD
  • {count} by the number of products the user added . For example: 2 (if the user wants to order 2 copies of the product).
  • {value} by the price of the products the user added . For example: 60.20 (if the user wants to order 2 copies of a product which cost $30.10).



Home and other pages

This tag lets Stormize know when a user visits your home page, or other specific pages you want to know about.
You need to trigger it on every page described above.

(function(a) {
   var b = document.createElement("script");b.type = "text/javascript";b.readyState ? b.onreadystatechange = function() {
      if ("loaded" === b.readyState || "complete" === b.readyState) b.onreadystatechange = null, a()} : b.onload = function() {a()};
   b.src = "//cdn.stormize.com/framework/{client_id}.js"; document.getElementsByTagName("head")[0].appendChild(b)
})(function() {
   var Stormize_Data_Layer = {
      'type' : 'pageview',
      'name' : '{name}'
   };

   StormizeTrack( Stormize_Data_Layer );
});
You need to replace :
  • {client_id} by your Stormize client id (you can find in your setting page). For example: 12345.
  • {name} by the name of the page. If you don't have this information, you can leave it blank (empty string). For example: Home page.



Order tag

This tag lets Stormize know when a user made a successful transaction on your website.
You need to trigger it every time a user complete his checkout.

(function(a) {
   var b = document.createElement("script");b.type = "text/javascript";b.readyState ? b.onreadystatechange = function() {
      if ("loaded" === b.readyState || "complete" === b.readyState) b.onreadystatechange = null, a()} : b.onload = function() {a()};
   b.src = "//cdn.stormize.com/framework/{client_id}.js"; document.getElementsByTagName("head")[0].appendChild(b)
})(function() {
   var Stormize_Data_Layer = {
      'type' : 'transaction',
      'order_id' : '{order_id}',
      'currency' : '{currency}',
      'amount' : '{amount}',
      'margin' : '{margin}',
      'shipping' : '{shipping}',
      'products' : [
            {product},
      ]
   };

   StormizeTrack( Stormize_Data_Layer );
});
You need to replace :
  • {client_id} by your Stormize client id (you can find in your setting page). For example: 12345.
  • {order_id} by the id of the current order. For example: order-781
  • {currency} by the ISO code of the user's currency. If you don't have this information, you can leave it blank (empty string). For Example: USD
  • {amount} by the total amount of the transaction (including shipping is the user pay for it). For example: 321.01
  • {margin} by the profit made on this transaction.  If you don't have this information, you can leave it to 0. For example: 56.12
  • {shipping} by the shipping cost. If you don't have this information, you can leave it to 0. For example: 9.99

For each product sold you need to a {product}, array like this: 
{'product_id' : '{product_id}', 'variation_id' : '{variation_id}','quantity' : {quantity}, 'amount' : {amount} },
You need to replace:
  • {product_id} by the id of the current product. For example: pid-123
  • {variation_id} by the id of the variation of the product. If you don't have this information, you can leave it blank (empty string). For Example: pid-123-1
  • {quantity} by the copies of this product the user ordered . For example: 2
  • {amount} by the total price for these products . For example: 60.20

Here is an example of the complete order array:
var Stormize_Data_Layer = {
   'type' : 'transaction',
   'order_id' : 'order-453121',
   'amount' : 42.38,
   'margin' : 0,
   'shipping' : 6.12,
   'products' : [
      {'product_id' : 'abc-1', 'variation_id' : 'abc-1-a','quantity' : 1, 'amount' : 12.00 },
      {'product_id' : 'abc-2', 'variation_id' : '', 'quantity' : 2, 'amount' : 24.26 },
   ]
};

Optional tags

The following code snippets are not mandatory to make Stormize work, but they add correlated metrics to your reports.
We strongly recommend you to take a look at them.


Register tag (optional)

This tag lets Stormize know when a user registers to your website.
You need to trigger it on every time a user completes is registration process.

(function(a) {
   var b = document.createElement("script");b.type = "text/javascript";b.readyState ? b.onreadystatechange = function() {
      if ("loaded" === b.readyState || "complete" === b.readyState) b.onreadystatechange = null, a()} : b.onload = function() {a()};
   b.src = "//cdn.stormize.com/framework/{client_id}.js"; document.getElementsByTagName("head")[0].appendChild(b)
})(function() {
   var Stormize_Data_Layer = {
      'type' : 'register',
      'member_id' : '{member_id}',
      'gender' : '{gender}',
      'age' : '{age}',
   };

   StormizeTrack( Stormize_Data_Layer );
});
You need to replace :
  • {client_id} by your Stormize client id (you can find it in your setting page). For example: 12345.
  • {member_id} by the name of the page. If you don't have this information, you can leave it blank (empty string). For example: Home page. Please avoid passing here any private information like email address, names, etc.
  • {gender} by woman if the user is a girl, else, by man. If you don't have this information, you can leave it blank (empty string).
  • {age} by the age of the user at the registration time. If you don't have this information, you can leave it blank (empty string). For example: 36.


Login tag (optional)

This tag lets Stormize know when a user login to your website.
You need to trigger it on every time a user successfully login.

(function(a) {
   var b = document.createElement("script");b.type = "text/javascript";b.readyState ? b.onreadystatechange = function() {
      if ("loaded" === b.readyState || "complete" === b.readyState) b.onreadystatechange = null, a()} : b.onload = function() {a()};
   b.src = "//cdn.stormize.com/framework/{client_id}.js"; document.getElementsByTagName("head")[0].appendChild(b)
})(function() {
   var Stormize_Data_Layer = {
      'type' : 'login',
      'member_id' : '{member_id}',
      'gender' : '{gender}',
      'age' : '{age}',
   };

   StormizeTrack( Stormize_Data_Layer );
});
You need to replace :
  • {client_id} by your Stormize client id (you can find it in your setting page). For example: 12345.
  • {member_id} by the name of the page. If you don't have this information, you can leave it blank (empty string). For example: Home page. Please avoid passing here any private information like email address, names, etc.


Search tag (optional)

This tag let Stormize know when a user searches for products.
You need to trigger it on every search page.

(function(a) {
   var b = document.createElement("script");b.type = "text/javascript";b.readyState ? b.onreadystatechange = function() {
      if ("loaded" === b.readyState || "complete" === b.readyState) b.onreadystatechange = null, a()} : b.onload = function() {a()};
   b.src = "//cdn.stormize.com/framework/{client_id}.js"; document.getElementsByTagName("head")[0].appendChild(b)
})(function() {
   var Stormize_Data_Layer = {
      'type' : 'search',
      'keyword' : '{keyword}',
      'results' : '{results}'
   };

   StormizeTrack( Stormize_Data_Layer );
});
You need to replace :
  • {client_id} by your Stormize client id (you can find it in your setting page). For example: 12345.
  • {keyword} by the keywords the user is looking for. If you don't have this information, you can leave it blank (empty string). For example: red t-shirts.
  • {results} by the number of occurrences found by your website to this request. If you don't have this information, you can leave it to 0. For example: 42. 
 

powered by
SlimFAQ