Retail Rocket Setup

Retai Rocket tracking code consists of 6 small code snippets that need to be placed on your website.

1. Main tracking code

Place this piece of code on each page of your website in the <head> section:

    <script type="text/javascript">
       var rrPartnerId = "partnerIdFromPartnerOffice";       
       var rrApi = {}; 
       var rrApiOnReady = rrApiOnReady || [];
       rrApi.addToBasket = rrApi.order = rrApi.categoryView = rrApi.view = 
           rrApi.recomMouseDown = rrApi.recomAddToCart = function() {};
       (function(d) {
           var ref = d.getElementsByTagName('script')[0];
           var apiJs, apiJsId = 'rrApi-jssdk';
           if (d.getElementById(apiJsId)) return;
           apiJs = d.createElement('script');
           apiJs.id = apiJsId;
           apiJs.async = true;
           apiJs.src = "//cdn.retailrocket.net/content/javascript/tracking.js";
           ref.parentNode.insertBefore(apiJs, ref);
       }(document));
    </script>

2. Product page tracker

Place this code on each product details page and quick view forms:

<script type="text/javascript">
    (window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() {
        // Send products data
        retailrocket.productsGroup.post({
            // Group ID, number without quotes
            // If a product is not merged by group, use Product ID as Group ID
            "groupId": <group ID>,
            // Product’s name
            "name": "<string>",
            // Product’s price
            "price": <decimal>,
            // Product’s picture URL, maximum 1 MB. Preferred image width 400-400 px. Pictures format JPEG or PNG.
	    // We recommend using images from category page. These images will be used in recommendation blocks and emails.
            "pictureUrl": "<string>",
            // Product’s URL
            "url": "<string>",
            "isAvailable": <bool>,
            // Array of product category name paths with a slash as category level separator.
            // Category path must exactly reflect your website menu structure and categories nesting
            // (please use static category names only, no URL paths, sidebar filters or dynamic
            // breadcrumbs are allowed). Specify only lowest level (if the product is listed
            // in categories "Women/Clothes/Skirts" and "Women/Clothes/" you should only pass
            // "Women/Clothes/Skirts")
            "categoryPaths": ["Example/Category/Path","Another/Category"],
            // Product’s description, optional parameter
            "description": "<string>",
            // Product Vendor (e.g. HP)
            "vendor": "Brand name",
            // Products in group specifications
            "products": {
"<product id>": {
                       "isAvailable": <bool>,
                       // Product’s name, optional parameter
                       "name": "<string>",
                       // Product’s color, optional parameter
                       "color": "<string>",
                       // Product’s size, optional parameter
                       "size": "<string>",
                       // Product’s URL, optional parameter
                       "url": "<string>",
                       // Product’s picture URL, maximum 1 MB. Preferred image width 400-400 px. Pictures format JPEG or PNG.
	               // We recommend using images from category page. These images will be used in recommendation blocks and emails.
                       "pictureUrl": "<string>",
                       // Product’s price, optional parameter
                       "price": <decimal>,
                       // Product’s old price, optional parameter
                       "oldPrice": <decimal>,
                       // Product’s description, optional parameter
                       "description": "<string>",
                       // Product additional information, optional parameter
                       "params": {
                           "<custom parameter 1 name>": "<custom parameter 1 value>",
                           "<custom parameter 2 name>": "<custom parameter 2 value>",
                           "<custom parameter N name>": "<custom parameter N value>"
                       }
                },
"<product id>": {
                       "isAvailable": <bool>,
                       "name": "<string>",
                       "color": "<string>",
                       "size": "<string>",
                       "url": "<string>",
                       "pictureUrl": "<string>",
                       "price": <decimal>,
                       "oldPrice": <decimal>,
                       "description": "<string>",
                       "params": {
                           "<custom parameter 1 name>": "<custom parameter 1 value>",
                           "<custom parameter 2 name>": "<custom parameter 2 value>",
                           "<custom parameter N name>": "<custom parameter N value>"
                       }
                }
            },
            // Product model (e.g. LaserJet 3500), optional parameter
            "model": "Model name",
            // Product type (e.g. Laser Printer), optional parameter
            "typePrefix": "Product type",
            // Old price, used to indicate products on sale, optional parameter
            "oldPrice": 17.46
        });
        // Group’s product IDs, array of numbers
        rrApi.groupView([<product IDs>]);
    });
</script>

Field params contains custom fields which will be available on the website recommendation display or in emails.

3. Category page tracker

Place this code on each category page:

<script type="text/javascript">
    (window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() {
        // Full path to current category with slash as a separator, string. It must match the path transmitted in product pages in this category.      
        rrApi.categoryView("Women/Clothes/Skirts");
    });
</script>

4. Add to cart tracker

Insert this code as an onMouseDown attribute in the code of all the buttons that add a product to a cart:

onmousedown="try { rrApi.addToBasket(<product_id>) } catch(e) {}"

Where, <product_id> is a numeric ID of the product.

For example:

<div class="buy_button" onmousedown="try { rrApi.addToBasket(123) } catch(e) {}"></div>

Note: Add to cart buttons may be used not only on the product pages, but on the category pages or internal search results pages as well. Add to cart tracker must be installed there too.

5. Transaction tracker

Place this code on a "Thank you for order" page. This tracker should work with all payments and delivery methods, 1-click order forms.

<script type="text/javascript">
(window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() {
    try {
	rrApi.setEmail("<user_email>");
        rrApi.order({
            "transaction": "<transaction_id>",
            "items": [
                { "id": <product_id>, "qnt": <quantity>,  "price": <price>},
                { "id": <product_id>, "qnt": <quantity>,  "price": <price> }
            ]
        });
    } catch(e) {}
})
</script>

Where:

<user_email> is an email address of a user,
<transaction_id> is an ID of the transaction (string),
<product_id> is a numeric product ID,
<qnt> is a quantity of the products bought,
<price> is a price per one product.

Example:

6. Email tracking code

Every time you have your visitor's email, run a code:

(window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() { rrApi.setEmail("<user_email>"); });

Important: you can only use an email of a person, who clearly expressed his or her desire to receive email messages from your company, including email advertising campaigns.

Example 1: add the following attribute to the "Submit" button of sign-up forms that are used across your website:

onclick="try {rrApi.setEmail($('#EmailFieldID').val());}catch(e){}"

Example 2: add the following code to the "Thank you" page if a user subscribed to your newsletter during checkout process:

<script type="text/javascript"> (window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() { rrApi.setEmail("<user_email>"); }); </script>

Example 3: additional user data for email personalization:

Recommended data to use:

gender (string),
age (number, without quotes),
name (first name only, string),
birthday (string, DD.MM.YYYY format).