

<div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

We recommend creating and editing tracking codes with the creator, as described in [Getting started](/developers/web/installation-and-configuration).

</div></div></div>


This article describes the parameters you can find in tracking codes. You may use this information for editing existing tracking codes, especially if your integration was built before the introduction of the tracking code creator in the Synerise Platform.

If you need to create a new tracking code and then manually edit its settings, create it as described in [Getting started](/developers/web/installation-and-configuration) and then return to this article.

## Tracking code in Single Page Applications
If your website is a Single Page Application (SPA), the tracking code must be modified. The modification changes the mechanism of sending page visit events and retrieving dynamic content.

1. Add the highlighted parameters to the tracking code:
    
   <div class="highlight-code-block" data-hl-lines="4,5,6,7">
   <pre><code class="language-js">function onSyneriseLoad() {
           SR.init({
               'trackerKey':'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
               'customPageVisit': true,
               'dynamicContent': {
                   'virtualPage': true
               }
           });
       }</code></pre>
   </div>

   **Result:**  
   The additional initialization parameters disable page visit events and dynamic content retrieval.
1. Re-enable page visit tracking and dynamic content retrieval by implementing the following methods in the page: 
   
   <pre><code class="language-js">SR.event.pageVisit()
       .then(function () {
           SR.dynamicContent.get();
   })</code></pre>

   
<div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

Page visits and dynamic content retrieval must be implemented according to the following rules:
- og:tags must be loaded first, regardless of the method that is used to load them
- page visits and dynamic content must be requested whenever the page is loaded, reloaded, and when the view changes

</div></div></div>


    
<div class="admonition admonition-tip"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg></div><div class="admonition-body"><div class="admonition-content">

You can use Google Tag Manager to implement the methods. To do so, trigger `SR.event.pageVisit();` and `SR.dynamicContent.get();` methods on events that indicate a page or DOM being loaded. `SR.init` is only called when DOM is loaded.

</div></div></div>


## Tracking script variants (no custom domain)
Synerise offers several variants of our Javascript SDK that you can use depending on the required features.

Fewer features usually result in smaller page size and shorter load times.

| Script version                                                                                     | URI                                                                                                             |
| -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| default: <br> Script with all functionalities                                                      | [synerise-javascript-sdk.min.js](https://web.snrbox.com/synerise-javascript-sdk.min.js)                         |
| no-wp: <br> Script without WebPush                                                                 | [synerise-javascript-sdk-no-wp.min.js](https://web.snrbox.com/synerise-javascript-sdk-no-wp.min.js)             |


## Additional tracking configuration parameters

The only required parameter during the initialization of the tracking code is the `trackerKey` parameter.  
By using the additional parameters described below, you can modify the configuration of the tracking code.

### Google dataLayer
If you use [Google Analytics 4 e-commerce](https://developers.google.com/analytics/devguides/collection/ga4/ecommerce), you can send data to it when using Synerise event tracking.


<div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

If you created the tracking code with the [generator](/developers/web/installation-and-configuration#creating-a-tracking-code), you don't need to edit it.

</div></div></div>


If your tracking code was created without the generator, add the `dataLayer` and `gaVersion` properties to `SR.init()`:


<pre><code class="language-javascript">SR.init({
    "trackerKey":"XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
    "dataLayer": dataLayer,
    "gaVersion": "CHOOSE_VERSION"
});</code></pre>


The `gaVersion` parameter is used to set the Google Analytics implementation. You can only choose one implementation for use with Synerise tracking.
- To send events to Google Analytics 4 Tag Manager implementation, set the value to `GA_4`
- To send events to Google Analytics 4 gtag.js implementation, set the value to `GA_4_TAG`

When you send events to Google Data Layer, some item parameters are saved in Synerise under different names than in the Data Layer request:
| Parameter name in Data Layer | Parameter name in Synerise                                           |
| ---------------------------- | -------------------------------------------------------------------- |
| `item_category`              | `$categories` (array)                                                |
| `item_id`                    | `$sku`                                                               |
| `price`                      | `$finalUnitPrice`                                                    |
| `item_name`                  | `$title`                                                             |
| `quantity`                   | `$quantity`                                                          |
| `value`/`revenue`            | `$totalAmount`                                                       |
| `transaction_id`             | `orderId`                                                            |
| `item_*`                     | `item_` is removed, for example `item_variant` is saved as `variant` |

Other parameters are saved without changing their names.

### Subdomains
If you have **several subdomains** with different tracking codes, they generate cookies with their own domains.

If you want the sub-domains to create cookies for another domain instead, declare the domain in the subdomains' tracking codes.  


<div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

The provided domain must be a parent domain of the site with the tracking code.

</div></div></div>


**Example**: If your site is `docs.example.com`, it would generate cookies with the  `docs.example.com` domain. To generate cookies with the root domain, the tracking code needs the following parameter:

<div class="highlight-code-block" data-hl-lines="3">
<pre><code class="language-javascript">SR.init({
    'trackerKey':'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
    'domain':'.example.com'
});</code></pre>
</div>



### Automatic tracking of page visits
You can turn off the **automatic collection of page visit events** with the `customPageVisit` parameter.<br>
In this case, events should be sent manually using the [SDK methods](/developers/web/event-tracking).

<pre><code class="language-javascript">SR.init({
    'trackerKey':'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
    'customPageVisit':true
});</code></pre>


### Synerise webpush worker scope
If you use **Synerise webpush** and need to set a custom service worker scope (registration path), you can enter that path as a parameter.

<pre><code class="language-javascript">SR.init({
    'trackerKey':'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
    'webpush':{
        'service_worker_scope':'/pl/'
    }
});</code></pre>


### Disabling modules
Additionally, if you need to **disable some Synerise modules** on a specific sub-page or domain, you can do it by specifying the parameters as below:

<pre><code class="language-javascript">SR.init({
    'trackerKey':'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
    'disableWebPush':true,
    'disableDynamicContent':true,
});</code></pre>


### Customizing metadata

You can add `<meta>` tags (for example, OG tags) to the website or modify existing ones. The new values are added to `page.visit` events. They can also be used with other features based on metadata, such as communication, recommendations, personalization, and so on.

To do it, add a `customizeMetadata` function to `SR.init()`.

**Example**:


<pre><code class="language-js">SR.init({
    'trackerKey': 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
    'customizeMetadata': function (metadata) {
        metadata.size = 8;
        metadata.isExample = true;
        metadata['og:title'] = 'Sneakers';
        metadata['product:retailer_part_no'] = '1a4d3380-04d1';
        return metadata;
    }
});</code></pre>


Usage:
- If the name of the meta key doesn't contain special characters, use the `metadata.keyName = 'keyValue'` syntax.
- If the name of the meta key contains special characters, use the `metadata['key_name'] = 'keyValue'` syntax.
- Up to 20 meta parameters can be returned.
- The following value types are allowed:
    - string
    - number
    - boolean
    - array

### Cookie expiration

By default, the `_snrs_p`, `_snrs_uuid`, and `_snrs_puuid` cookies expire after 400 days. You can change this by using the `cookieExpiration` parameter. The value is the number of days after which the cookies expire.


<div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

- If a browser's cookie expiration limit is lower than your setting, your setting is ignored.
- The expiration time of the `_snrs_sa` and `_snrs_sb` cookies is 30 minutes and **cannot** be changed.

</div></div></div>


The following example sets cookie expiration time to 60 days:


<pre><code class="language-javascript">SR.init({ 
    "trackerKey": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    "cookieExpiration": 60
});</code></pre>


### Nonce for Content Security Policies

Nonce (number used once) is a content attribute which can be used by Content Security Policies (CSPs) to determine if an element should be allowed. If a script doesn't have a nonce value that matches the one expected by the CSP, the script can't execute.

You can add the nonce to the Synerise SDK initialization script:

<pre><code class="language-js">SR.init({
  trackerKey: "VALUE",
  nonce: "VALUE"
});</code></pre>


The tracking code and any scripts that the SDK adds to the page (for example, in Dynamic Content) will have the nonce value that you add to `SR.init`


<div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

You must generate the value of the nonce yourself and make sure it matches the one expected by the CSP.

</div></div></div>


For more details on nonce and implementing it, see [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce).
