> ## Documentation Index
> Fetch the complete documentation index at: https://developer.voyado.com/llms.txt
> Use this file to discover all available pages before exploring further.

# The tracking script

> How to configure and implement the Voyado tracking script on your website.

The tracking script is a small JavaScript snippet placed in the HTML of your website. It collects cart changes and product views and sends them to Engage.

The tracking script is required for:

* abandoned cart
* abandoned browse
* products of interest
* product recommendations

<Note>
  The tracking script is not the same thing as the tracking parameters attached to a URL. The script runs on your pages while the URL parameters (such as `vtid`) are read *by* the script.
</Note>

## Configure the script

This is the Voyado tracking script:

```javascript theme={null}
<script>
    (function (i, s, o, g, r, a, m) {
        i['VoyadoAnalyticsObject'] = r;
        i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date();
        a = s.createElement(o), m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '[SCRIPT-PATH]', 'va');
    va("setTenant", "[TENANT-ID]");
</script>
```

Replace these two placeholders before you use it:

<AccordionGroup>
  <Accordion title="[SCRIPT-PATH]">
    The path to the JavaScript analytics package. There are two options, depending on the environment you are running in.

    ```http Production theme={null}
    https://assets.voyado.com/jsfiles/analytics_0.1.7.min.js
    ```

    ```http Staging theme={null}
    https://assets.voyado.com/jsfiles/analytics_0.1.7.staging.min.js
    ```

    <Warning>
      Use the path that matches your environment. Running the production script in staging (or the other way round) means tracking will not work.
    </Warning>

    <Tip>
      `analytics_0.1.7` is the latest version. You can pin an earlier version if you need to, but note that server-side cookie support requires 0.1.7 or later.
    </Tip>
  </Accordion>

  <Accordion title="[TENANT-ID]">
    Your unique client (tenant) ID. It is the same in production and staging, and is usually the subdomain in your Engage root URL.

    For example, if your URL is `supershop.voyado.com`, the tenant ID is `supershop`.

    Contact your Voyado Engage team if you are unsure.
  </Accordion>
</AccordionGroup>

A configured script looks like this:

```javascript Complete tracking script theme={null}
<script>
    (function (i, s, o, g, r, a, m) {
        i['VoyadoAnalyticsObject'] = r;
        i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date();
        a = s.createElement(o), m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://assets.voyado.com/jsfiles/analytics_0.1.7.min.js', 'va');
    va("setTenant", "supershop");
</script>
```

## Implement the script

<Warning>
  The script must be present, initialized and running on *every page* of your site. including landing pages, category pages and other non-product pages. The script is what identifies a visitor who arrives from an Engage email link. If an email link lands on a page without the script, identification will fail.
</Warning>

Implement the script either directly in your page templates or through a tag manager.

<AccordionGroup>
  <Accordion title="Directly in code">
    Copy your configured snippet and paste it immediately after the `<head>` tag of every page on your website.
  </Accordion>

  <Accordion title="Via a tag manager">
    1. Log into your tag manager.
    2. Select **New Tag**.
    3. Give the tag an easily recognizable name.
    4. Open **Tag configuration** and select **Custom HTML** as the tag type.
    5. Paste your configured tracking script into the box.
    6. Open **Triggers** and select **All pages** (recommended).
    7. Save the tag.
    8. Publish the new version of your tag container.
  </Accordion>
</AccordionGroup>

## Script methods

Once the script is running, the following functions are available on your pages.

| Method         | Call it                                        | Sends a request to Collect? |
| -------------- | ---------------------------------------------- | --------------------------- |
| `setTenant`    | Once, in the snippet itself                    | No                          |
| `setContactId` | When your site identifies the visitor          | No                          |
| `cart`         | When the cart changes in any way               | Yes                         |
| `emptyCart`    | When the cart is emptied or checkout completes | Yes                         |
| `productview`  | What a product is shown to the visitor         | Yes                         |

<Warning>
  Even though you will see these referred to as functions, they are not actual functions in JavaScript. Instead, the va() function is called with two arguments: the function name as a string, and then the value / payload. For example:

  ```javascript theme={null}
  va("emptyCart", {"cartRef": "354354"});
  ```
</Warning>

<Card title="setContactId() and cookies" href="/docs/tracking/identification-and-cookies" icon="https://mintcdn.com/voyado/Ns4bBcK3LNctK_Un/icons/developer-link.png?fit=max&auto=format&n=Ns4bBcK3LNctK_Un&q=85&s=fbd08f956358ab12f664a7158e1a1399" horizontal width="128" height="128" data-path="icons/developer-link.png" />

<Card title="cart() and emptyCart()" href="/docs/tracking/tracking-cart-changes" icon="https://mintcdn.com/voyado/Ns4bBcK3LNctK_Un/icons/developer-link.png?fit=max&auto=format&n=Ns4bBcK3LNctK_Un&q=85&s=fbd08f956358ab12f664a7158e1a1399" horizontal width="128" height="128" data-path="icons/developer-link.png" />

<Card title="productview()" href="/docs/tracking/tracking-product-views" icon="https://mintcdn.com/voyado/Ns4bBcK3LNctK_Un/icons/developer-link.png?fit=max&auto=format&n=Ns4bBcK3LNctK_Un&q=85&s=fbd08f956358ab12f664a7158e1a1399" horizontal width="128" height="128" data-path="icons/developer-link.png" />

## Improving identification in Safari

Safari caps the lifetime of cookies created with JavaScript at seven days. Script version 0.1.7 and later can fall back to a cookie your server creates, which keeps visitors identified for a year.

<Card title="Implement server-side cookies" href="/docs/tracking/identification-and-cookies#server-side-cookies" icon="https://mintcdn.com/voyado/Ns4bBcK3LNctK_Un/icons/developer-link.png?fit=max&auto=format&n=Ns4bBcK3LNctK_Un&q=85&s=fbd08f956358ab12f664a7158e1a1399" horizontal width="128" height="128" data-path="icons/developer-link.png" />
