# Web SDK methods reference

## Authentication by JSON Web Token (JWT)

JS SDK calls can be authenticated with JWT. For more details, read [this article](/developers/web/jwt-auth).

### Retrieve current JWT
You can check the current token. If no token is set, the method returns null.

After retrieving the token from the SDK, you can decode it to check the expiration time and details of the customer.


<pre><code class="language-javascript">SR.jwt.getAccessToken();</code></pre>


### Set JWT

Set a new token when a customer logs in or the old token expires. The method takes one argument: the JWT as a string.


<pre><code class="language-javascript">SR.client.setAccessToken('token');</code></pre>


### Clear JWT
To log out a user, clear the token.


<pre><code class="language-javascript">SR.jwt.clearAccessToken();</code></pre>


## Tracking customer actions
### Basic method for tracking events
For more details, click [here](/developers/web/event-tracking). 

<pre><code class="language-javascript">SR.event.trackCustomEvent(
    "entries.count", // event action name
    { // additional parameters
        "lat": "50.0937",
        "lon": "18.5429",
        "object": "Shopping center",
        "shopId": "S198",
        "shopName": "Chicago",
        "zipCode": "60639",
        "street": "W North Ave",
        "time": 1556474400000,
        "entries": 27
    }
)</code></pre>

### Re-initialize the tracking code
You can use this method to re-initialize a search for the `data-synerise` attributes on a page. This is used, for example, in pop-up windows.

<pre><code class="language-javascript">SyneriseTC.initFormCatch()</code></pre>


### Send a page.visit event

You can send a page.visit event. This is used, for example, in single-page applications. By default, the `page.visit` event tracks data such as customer UUID, OG tags of the page (if they exist), browser, etc.


<pre><code class="language-js">SR.event.pageVisit(
  {
    "key": "value" // optional additional parameters
  }
)</code></pre>

## Managing customer data
### Send form data
This method allows you to send data from an HTML form to the SDK. This event is sent automatically when a customer sends a form. For more details, click [here](/developers/web/tracking-form-data).

<pre><code class="language-javascript">SR.event.sendFormData('contact',
    { //form data
        "surname": "Doe",
        "name": "John",
        "email": "john.doe@synerise.com",
        "customParam1": "customValue1",
        "customParam2": "customValue2"
    },
    { //field mapping
        "lastname": "surname",
        "firstname": "name",
        "email": "email",
        "customAttribute1": "customParam1",
        "customAttribute2": "customParam2"
    }
)</code></pre>

### Send form data without a form
You can emulate the behavior of a form by calling the SDK directly.

<div class="admonition admonition-warning"><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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg></div><div class="admonition-body"><div class="admonition-content">

- If you use the non-unique email feature, use `custom_identify` instead of `email`. See [non-unique email feature configuration](/docs/settings/configuration/non-unique-emails).
- The SDK does not validate the data. For example, if the customer makes an error in their identifier and sends the form, a new profile with that identifier is created. This may cause the event history of an anonymous customer to be merged into a recognized profile with an error in the identifier, even if the user re-sends the form again with the right identifier. To avoid this, validate the entered data before sending the form.

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



<pre><code class="language-javascript">SR.event.sendFormData('formType', {
    lastname: "Doe",
    firstname: "John",
    email: "john.doe@synerise.com",
    customAttribute: "customAttributeValue" // saved in the `attributes` object of a Profile
    // more attributes and custom attributes
})</code></pre>


You can replace `formType` with another value or a number of comma-separated values (no spaces). These values are saved as `formType` in the event and as tags in the customer's Profile.

### Get IdentityHash

Generates and automatically saves `IdentityHash` based on:
- `email` (for unique emails),
- `custom_identify` (for non-unique emails).

This method returns a string.


<pre><code class="language-javascript">SR.client.getIdentityHash()</code></pre>


### Calculate IdentityHash

Calculates `IdentityHash` for any string. This method returns a number.


<pre><code class="language-javascript">SR.client.hashIdentity('john.doe@synerise.com')</code></pre>


### Send newsletter agreements
You can use this method to send a customer's newsletter agreements. For more details, click [here](/developers/web/newsletter-agreements).

<pre><code class="language-js">SyneriseTC.sendFormData('newsletter', {
    // depending on the configuration, email (default) or custom_identify is used as the identifier
    email:'john.doe@synerise.com',
    firstname:'John'
    }
)</code></pre>

## Tracking transactions
Transactions can be tracked using Google Data Layer or sent to the Synerise tracker, which uses an identical format.
### Send a "product added to cart" event
This call creates a [`product.addToCart` event](/docs/assets/events/event-reference/items#productaddtocart).


<div class="content-tabs" data-tab-group="tabgrp-1235">
<div class="tab-buttons"><button class="tab-button" data-tab-id="tabgrp-1235-0" data-tab-group="tabgrp-1235" data-tab-active="true">Tag Manager</button><button class="tab-button" data-tab-id="tabgrp-1235-1" data-tab-group="tabgrp-1235">gtag.js</button></div>

<div class="tab-panel" data-tab-id="tabgrp-1235-0" data-tab-group="tabgrp-1235" data-tab-active="true">

<pre><code class="language-javascript">dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});</code></pre>

</div>

<div class="tab-panel" data-tab-id="tabgrp-1235-1" data-tab-group="tabgrp-1235">

<pre><code class="language-js">gtag("event", "add_to_cart", {
  currency: "USD",
  value: 7.77,
  items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 9.99,
      quantity: 1
    }
  ]
});</code></pre>

</div>
</div>

### Send a "product removed from cart" event
This call creates a [`product.removeFromCart` event](/docs/assets/events/event-reference/items#productremovefromcart).


<div class="content-tabs" data-tab-group="tabgrp-1236">
<div class="tab-buttons"><button class="tab-button" data-tab-id="tabgrp-1236-0" data-tab-group="tabgrp-1236" data-tab-active="true">Tag Manager</button><button class="tab-button" data-tab-id="tabgrp-1236-1" data-tab-group="tabgrp-1236">gtag.js</button></div>

<div class="tab-panel" data-tab-id="tabgrp-1236-0" data-tab-group="tabgrp-1236" data-tab-active="true">

<pre><code class="language-javascript">dataLayer.push({
  event: "remove_from_cart",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});</code></pre>

</div>

<div class="tab-panel" data-tab-id="tabgrp-1236-1" data-tab-group="tabgrp-1236">

<pre><code class="language-js">gtag("event", "remove_from_cart", {
  currency: "USD",
  value: 7.77,
  items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 9.99,
      quantity: 1
    }
  ]
});</code></pre>

</div>
</div>

### Send purchase details
This call creates a [`transaction.charge` event](/docs/assets/events/event-reference/items#transactioncharge) and corresponding [`product.buy` events](/docs/assets/events/event-reference/items#productbuy).


<div class="content-tabs" data-tab-group="tabgrp-1237">
<div class="tab-buttons"><button class="tab-button" data-tab-id="tabgrp-1237-0" data-tab-group="tabgrp-1237" data-tab-active="true">Tag Manager</button><button class="tab-button" data-tab-id="tabgrp-1237-1" data-tab-group="tabgrp-1237">gtag.js</button></div>

<div class="tab-panel" data-tab-id="tabgrp-1237-0" data-tab-group="tabgrp-1237" data-tab-active="true">

<pre><code class="language-javascript">dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "T_12345",
      value: 25.42,
      tax: 4.90,
      shipping: 5.99,
      currency: "USD",
      coupon: "SUMMER_SALE",
      items: [
       {
        item_id: "SKU_12345",
        item_name: "Stan and Friends Tee",
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        discount: 2.22,
        index: 0,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Adult",
        item_category3: "Shirts",
        item_category4: "Crew",
        item_category5: "Short sleeve",
        item_list_id: "related_products",
        item_list_name: "Related Products",
        item_variant: "green",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 9.99,
        quantity: 1
      },
      {
        item_id: "SKU_12346",
        item_name: "Google Grey Women's Tee",
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        discount: 3.33,
        index: 1,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Adult",
        item_category3: "Shirts",
        item_category4: "Crew",
        item_category5: "Short sleeve",
        item_list_id: "related_products",
        item_list_name: "Related Products",
        item_variant: "gray",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 20.99,
        promotion_id: "P_12345",
        promotion_name: "Summer Sale",
        quantity: 1
      }]
  }
});</code></pre>

</div>

<div class="tab-panel" data-tab-id="tabgrp-1237-1" data-tab-group="tabgrp-1237">

<pre><code class="language-js">gtag("event", "purchase", {
    transaction_id: "T_12345",
    value: 25.42,
    tax: 4.90,
    shipping: 5.99,
    currency: "USD",
    coupon: "SUMMER_SALE",
    items: [
     {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 9.99,
      quantity: 1
    },
    {
      item_id: "SKU_12346",
      item_name: "Google Grey Women's Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      discount: 3.33,
      index: 1,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "gray",
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 20.99,
      promotion_id: "P_12345",
      promotion_name: "Summer Sale",
      quantity: 1
    }]
});</code></pre>

</div>
</div>

### Enable syneriseLayer transaction tracking
You can use this method for transaction tracking if you're not using Google Data Layer.

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

### Send a transaction to syneriseLayer
syneriseLayer queries are formatted in the same way as Google Data Layer queries.

<pre><code class="language-javascript">syneriseLayer.push({...})</code></pre>



## Tracking campaign interactions

### Send a "dynamicContent.show" event

By default, the `dynamicContent.show` event is tracked automatically when a Dynamic Content campaign is displayed to the visitor.

If the the event is not tracked automatically for your campaign, you can send it using the dedicated method below. This lets you build analytics and measure the performance of your communication.


<pre><code class="language-js">SR.event.dynamicContentShow(
  {
    "id": "value", // campaign ID
    "variantId": "value", // variant ID
    "key": "value" // optional additional parameters
  },
  "Dynamic content was displayed"
)</code></pre>


### Send a "dynamicContent.click" event
The `dynamicContent.click` event is tracked automatically when a link or a button from Dynamic Content campaign is clicked by the Profile.

If the the event is not tracked automatically for any link in your campaign, you can send it using the dedicated method below. This lets you build analytics and measure the performance of your communication.


<pre><code class="language-js">SR.event.dynamicContentClick(
  {
    "id": "value", // campaign ID
    "variantId": "value", // variant ID
    "key": "value" // optional additional parameters
  },
  "Dynamic content was clicked" // Optional label, not saved in persistent storage
)</code></pre>


### Send a "recommendation.view" event
By default, the `recommendation.view` event is tracked automatically when a recommended items are displayed to a visitor within the Dynamic Content campaign.

If the the event is not tracked automatically for your campaign, you can send it using the dedicated method below. This lets you build analytics and measure the performance of your communication.


<pre><code class="language-js">SR.event.recommendationView(
  {
    "campaignId": "value", // ID of the recommendation campaign related to the event
    "correlationId": "value", // correlation ID of the response from recommendation campaign. Its value is included in the links to recommended items
    "items": ["value", "value"], // an array of items included in the recommendation 
    "key": "value" // optional additional parameters
  },
  "Recommended items were displayed" // Optional label, not saved in persistent storage
)</code></pre>


### Send a "recommendation.click" event
By default, the `recommendation.click` event is tracked automatically when a recommended item is clicked by the Profile within the Dynamic Content campaign.

If the the event is not tracked automatically for the links to reccommended items in your campaign, you can send it using the dedicated method below. This lets you build analytics and measure the performance of your communication.


<pre><code class="language-js">SR.event.recommendationClick(
  {
    "campaignId": "value", // ID of the recommendation campaign related to the event
    "correlationId": "value", // correlation ID of the response from recommendation campaign. Its value is included in the links to recommended items
    "item": "value", // ID of the clicked item (also called `sku`, `productId`, and `retailer_part_no`) 
    "key": "value" // optional additional parameters
  },
  "Recommended item was clicked" // Optional label, not saved in persistent storage
)</code></pre>


### Send a "item.search.click" event

You can send the `item.search.click` event using the dedicated method below. The event should be sent when a visitor clicks an item in AI search results. This lets you build analytics and measure the performance of your communication.


<pre><code class="language-js">SR.event.itemSearchClick(
  {
    "correlationId": "value", // correlation ID of the response from AI search. Its value is included in the links to returned items
    "item": "value", // ID of the clicked item (also called sku, productId, and retailer_part_no) 
    "position": 1, // position of the clicked item in the result list (count starts with 1)
    "searchType": "autocomplete", // type of the search. The value can be "full-text-search", "autocomplete", or "listing"
    "key": "value" // optional additional parameters
  },
  "An item in search results was clicked" // Optional label, not saved in persistent storage
)</code></pre>


## Dynamic content

### Get campaigns rendered on current page

You can retrieve the data of campaigns that were rendered on the current page.


<pre><code class="language-js">SR.dynamicContent.getRendered()</code></pre>


The output is an array of Dynamic Content campaigns that were rendered on the current page. Each object contains metadata of the campaign, such as its UUID, capping, triggers, variants, and so on. The `variant` object stores the HTML, JS, and CSS content of the campaign, with Inserts already processed.


### Get campaign content on demand

You can retrieve the content of a single Dynamic Content campaign. The campaign must be active.  


<pre><code class="language-js">SR.dynamicContent.get("campaignUuid")</code></pre>


The command makes an API request to fetch the campaign. The response contains the HTML, JS, and CSS (with inserts already processed) of the campaign in the `variants` array, in the `content` object of a variant.

**Example:**  
Use the following method to retrieve the content of the Dynamic Content campaign that displays the search box on top of this page:

<pre><code class="language-js">SR.dynamicContent.get("23c47a51-8d63-42c4-8f83-9c5352532732")</code></pre>
