
Tracking transactions lets you use features such as eCommerce analytics, product purchase segmentation, or cart/transaction based automations.

## Authentication

Requests to the SDK may require customer authentication. For more details, see [this article](/developers/web/jwt-auth).

## Using Google Data Layer
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.

### Product added to shopping cart

This call creates a [`product.addToCart` event](/docs/assets/events/event-reference/items#productaddtocart).


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

<div class="tab-panel" data-tab-id="tabgrp-1240-0" data-tab-group="tabgrp-1240" 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-1240-1" data-tab-group="tabgrp-1240">

<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>


### Product removed from shopping cart

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


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

<div class="tab-panel" data-tab-id="tabgrp-1241-0" data-tab-group="tabgrp-1241" 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-1241-1" data-tab-group="tabgrp-1241">

<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>


### 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-1242">
<div class="tab-buttons"><button class="tab-button" data-tab-id="tabgrp-1242-0" data-tab-group="tabgrp-1242" data-tab-active="true">Tag Manager</button><button class="tab-button" data-tab-id="tabgrp-1242-1" data-tab-group="tabgrp-1242">gtag.js</button></div>

<div class="tab-panel" data-tab-id="tabgrp-1242-0" data-tab-group="tabgrp-1242" 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-1242-1" data-tab-group="tabgrp-1242">

<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>


## Tracking transactions without Google Data Layer
If you're not integrated with Google Data Layer, you can create your own array variable and connect it to Synerise using the SDK:
<!-- add link to additional configuration parameters when the section is ready -->


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


After this configuration, you can send objects like the ones above to the `syneriseLayer` variable instead of the `dataLayer` variable:


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