JavaScript

BrainSINS JavaScript integration; examples by page-type

Heads up! If your online store is based on Prestashop, you may it easier to use our Prestashop module: Check our Plugins section.

This documentation page shows some examples of the JSON code you have to place in each page type of your online store. If you haven't checked the specification of our JSON notation, we encourage you to do so before reading this guide.

In the product page you need to include another tag, that will send us the information about the product being visited by the user:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "product",
      productId: ID_PRODUCT
   };
</script>
<!-- BrainSINS Code Ends -->

ID_PRODUCT should be replaced by the unique identifier of the product that the user is visualizing in that moment. That unique identifier should be the same that exists on your product feed.

For instance, if the product id is “123″, you should be generating the following code:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "product",
      productId: 123
   };
</script>
<!-- BrainSINS Code Ends -->

In the cart page you need to generate a code that sends to BrainSINS the cart contents, including the product ids and the quantity for each product:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "cart",
      cart: [
	     {id: ID, quantity: QUANTITY},
	     {id: ID, quantity: QUANTITY},
	     {id: ID, quantity: QUANTITY},
	     ...
	  ]
   };
</script>
<!-- BrainSINS Code Ends -->

In the cart section you have to include all the products that the user has added to his cart, including the ID or unique identifier of the product, and QUANTITY or the quantity that the user has added of that given product to his cart.

For instance, if your client has included 2 times the item 123 and 1 time the item 456, the code you’d generate should be the following one:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "cart",
      cart: [
         {id: 123, quantity: 2},
         {id: 456, quantity: 1}
      ]
   };
</script>
<!-- BrainSINS Code Ends -->

If your cart page is the same one that the page where checkout starts, you should change the pageType to “checkout”, mixing the information of the cart page and the begin checkout page. In this situation, you should avoid the next step (step 3: starting the checkout process).

An example of a the script you should put in your website when cart and begin checkout are in the same page:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "checkout",
      cart: [
         {id: 123, quantity: 2},
         {id: 456, quantity: 1}
      ]
   };
</script>
<!-- BrainSINS Code Ends -->

If your online store is able to add products via AJAX, in the button “Add to cart” in the product page, you should include the following function that will notify us that the product has been added to the cart:

<!-- BrainSINS Code Starts -->
   brainsins.addItem( ID_PRODUCT, QUANTITY, PRICE );
<!-- BrainSINS Code Ends -->

When the checkout process start because the user is ready to pay, you need to generate the following code:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "checkout"
   };
</script>
<!-- BrainSINS Code Ends -->

When the user has already paid (in most cases in the thank you page), you need to send us a confirmation message including the total amount of the purchase. To do so, the code you need to generate is:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "thankYou",
      totalAmount: TOTAL
   };
</script>
<!-- BrainSINS Code Ends -->

TOTAL should be replaced by the total amount of the purchase.

For instance, if the total value of the purchase is 98.54$ the code you’d generate should be the following one:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "thankYou",
      totalAmount: 98.54
   };
</script>
<!-- BrainSINS Code Ends -->

Notice that totalAmount contains a float number, with no currency code or any additional element.

When the user is visiting a given category, we should include the following code:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "category",
      categories: CATEGORIES
   };
</script>
<!-- BrainSINS Code Ends -->

CATEGORIES should be replaced by the name of the category the user is visiting, or the hierarchy of the given category, starting by the most general category and using “,” as delimiter.

For instance, if we are visiting the “shirts” category, we should add the following code:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "category",
      categories: "shirts"
   };
</script>
<!-- BrainSINS Code Ends -->

When the user is visiting the homepage, we should include the following code:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "home",
   };
</script>
<!-- BrainSINS Code Ends -->

In order to be able to send your users email retargeting notifications, we need to know some data about your users. In the next sections you will discover the code you need to add to your online store when a users logs-in, logs-out or changes his email notification preferences.

There exist two main approaches. One for websites that have an specific login/logout page, and other approach for webpages that do the login/logout via events (such as AJAX based logins).

Log-in

When a users logs-in to your ecommerce website and its redirected to an specific login page, you need to insert the following code. Please, only include this code for users that have accepted to receive email notifications:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "login",
      userEmail: EMAIL_USER,
      language: LANGUAGE
   };
</script>
<!-- BrainSINS Code Ends -->

EMAIL should be replaced by the customer’s email.

LANGUAGE should be replaced by the user’s language. In most cases, it will be “en” for english, “es” for spanish, etc.

Next you can find an example for the email “email@example.com”, and the english language.

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "login",
      userEmail: "email@example.com",
      language: "en"
   };
</script>
<!-- BrainSINS Code Ends -->

Log-out

When a users logs-out from your ecommerce website and its redirected to an specific logout page, you need to insert the following code.

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "logout"
   };
</script>
<!-- BrainSINS Code Ends -->

When the User Opts-out from Email Communications

When a users opts-out from your email communications, you must notify our system by including the following code:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   var BrainSINSData = {
      pageType: "login",
      userEmail: EMAIL_USER,
      userNewsletter: 0
   };
</script>
<!-- BrainSINS Code Ends -->

EMAIL should be replaced by the customer’s email.

Log-in

When a users logs-in to your ecommerce website using an asynchronous event, you need to insert the following code. Please, only include this code for users that have accepted to receive email notifications:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   BrainSINSTracker.trackEMailNewsletter( EMAIL_USER, 1, LANGUAGE );
</script>
<!-- BrainSINS Code Ends -->

EMAIL should be replaced by the customer’s email.

LANGUAGE should be replaced by the user’s language. In most cases, it will be “en” for english, “es” for spanish, etc.

Next you can find an example for the email “email@example.com”, and the english language.

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   BrainSINSTracker.trackEMailNewsletter( "email@example.com", 1, "en" );
</script>
<!-- BrainSINS Code Ends -->

Log-out

When a users logs-out from your ecommerce website using an asynchronous event you need to insert the following code.

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   BrainSINSTracker.trackUserLoggedOut();
</script>
<!-- BrainSINS Code Ends -->

When the User Opts-out from Email Communications

When a users opts-out from your email communications, you must notify our system by including the following code:

<!-- BrainSINS Code Starts -->
<script type="text/javascript">
   BrainSINSTracker.trackEMailNewsletter( EMAIL, 0 );
</script>
<!-- BrainSINS Code Ends -->

EMAIL should be replaced by the customer’s email.