# How to create a Transaction Tracker via DataLayer

{% hint style="info" %}
This feature is currently available only to new clients and AB Tasty accounts not using the legacy Transaction Tag Generator feature. If you need access, please contact your Customer Success Manager (CSM).
{% endhint %}

The page of transaction trackers enables you to create some transaction tracker rules directly linked to your DataLayer.

Thanks to this feature, you will be able to catch all purchase events based on the rules of the DataLayer. Each time one of your visitors complete one transaction, an automatic hit will be sent into the goals metrics page, and you’ll be able to analyze them:

* Inside the reporting
* To extract them from our Data Explorer

## Requirements <a href="#h_01j4repc8asrkxjxs9s9ntw5pk" id="h_01j4repc8asrkxjxs9s9ntw5pk"></a>

### Inside AB Tasty <a href="#h_01j4reptqqafwkvgmdvq3ymj2s" id="h_01j4reptqqafwkvgmdvq3ymj2s"></a>

To create a Custom Tracker via DataLayer you must toggle on the button from the [Data Layer Integration page](https://app2.abtasty.com/settings/integration/datalayer), select a DataLayer and save the step:

<img src="/files/4EXMqQNuRAIcgNVv56p5" alt="" width="563">

The available DataLayers are the following:

* Google Tag Manager
* Tealium
* CommandersAct

**Heads Up❗- Custom DataLayers**

We don’t manage Custom DataLayers as we can’t predict its structure, we only support GTM, CommandersAct and Tealium providers.

### On your DataLayer <a href="#h_01j4re4rmb6a6x17914ktj3gen" id="h_01j4re4rmb6a6x17914ktj3gen"></a>

#### Google Tag manager <a href="#h_01j4re4rmbstdj7vfq2pvn198y" id="h_01j4re4rmbstdj7vfq2pvn198y"></a>

If you use Google Tag Manager as a DataLayer. This feature is based on the documentation provided by Google here: <https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?hl=fr&client_type=gtm>

#### Standard implementation

```
window.dataLayer.push({
    event: "purchase",
    ecommerce: {
        transaction_id: "T_12345_2",
        value: 30.03,
        tax: 4.90,
        shipping: 5.99
        currency: "USD",
        coupon: "SUMMER_SALE",
        items: [
            {
              item_id: "SKU_12345",
              item_name: "Stan and Friends Tee",
              item_category: "Apparel",
              price: 10.01,
              quantity: 3
            }
        ] 
    }
```

#### If you're using gtag.js directly

<https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?hl=fr&client_type=gtag>

<pre><code><strong> gtag("event", "purchase", {
</strong><strong>                transaction_id: "T_12345_2",
</strong><strong>                value: 30.03,
</strong><strong>                tax: 4.90,
</strong><strong>                shipping: 5.99,
</strong><strong>                currency: "USD",
</strong><strong>   items_count: 3 
</strong><strong>                coupon: "SUMMER_SALE",
</strong><strong>                items: [
</strong><strong>                {
</strong><strong>                  item_id: "SKU_12345",
</strong><strong>                  item_name: "Stan and Friends Tee",
</strong><strong>                  affiliation: "Google Merchandise Store",
</strong><strong>                  coupon: "SUMMER_FUN",
</strong><strong>                  discount: 2.22,
</strong><strong>                  index: 0,
</strong><strong>                  item_brand: "Google",
</strong><strong>                  item_category: "Apparel",
</strong><strong>                  item_category2: "Adult",
</strong><strong>                  item_category3: "Shirts",
</strong><strong>                  item_category4: "Crew",
</strong><strong>                  item_category5: "Short sleeve",
</strong><strong>                  item_list_id: "related_products",
</strong><strong>                  item_list_name: "Related Products",
</strong><strong>                  item_variant: "green",
</strong><strong>                  location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
</strong><strong>                  price: 10.01,
</strong><strong>                  quantity: 3
</strong><strong>                }]
</strong><strong>          });
</strong><strong>      });
</strong></code></pre>

Once an order is made on your website and once a purchase event is triggerred on your DataLayer, the event must be pushed inside your Google Tag Manager DataLayer this way (see items 10 of this DataLayer):

<img src="/files/RdWvRhjAQcxT2aiQhLN1" alt="" width="563">

## Tracking the value of a key in your DataLayer <a href="#h_01j4ret8k6tzj7aq3hzsyczjyq" id="h_01j4ret8k6tzj7aq3hzsyczjyq"></a>

### Create a rule of Transaction Tracker <a href="#h_01j4re4rmcck8azqfgnftrsezf" id="h_01j4re4rmcck8azqfgnftrsezf"></a>

To create a new rule of Transaction tracker via DataLayer:

1. From the Transaction Tracker page (Settings > Implementation > Transaction Tracker Management) : <https://app2.abtasty.com/settings/transaction-tracking>
2. Click *New Transaction Tracker* on the top right of the table. A modal is displayed:

<img src="/files/yndjktrFtw9blq2Lly1G" alt="" width="271">

{% hint style="info" %}
**Custom keys in your DataLayer**\
In order to avoid bugs or wrong configuration, and if you have some basic GA4 event, most of the inputs are already set up by default.
{% endhint %}

Please verify them and, if needed, enter the correct information in order to have a match between our keys (name of the field you can have on this modal and the keys/values provided by the GA4 event purchase).

**Mandatory Fields:**

Specify the event to check: By default, the name of this event is **purchase.** \
But it can be another one, and it’s not necessary to enter “purchase”**.** \
\
**You need to define which event corresponds to your own purchase event on your datalayer.** \
**(*****e.g : transaction\_collected, achat, checkout\_completed, etc ..*****)**

Enter a name for your Transaction Affiliation (ta) \
Here you can define a name of the transaction. **It’s not necessary to enter “purchase”** (but you can). You can enter the name of your choice.

**Transaction ID (tid)\*** : Refers to the ***transaction\_id*** field (ex : **T\_12345\_2** of the event inside [this doc](https://developers.google.com/analytics/devguides/collection/ga4/set-up-ecommerce)).

**Transaction revenue (tr)\***: Refers to the ***value*** field (ex : **30.03** of the event inside [this doc](https://developers.google.com/analytics/devguides/collection/ga4/set-up-ecommerce)).

**Number of items (icn)**\* : Refers to the ***items*** field. If you select:

* *Default* : If you have one key with the number of items. Let’s imagine a key ***items\_count***. This key should be a number.
* *Sum* : If your key contains the quantity of each purchased item, select Sum (ex : **3**)**.**
* *Count* : If your key contains unitary purchased items, select Count. (ex : **1**).

Optional Fields:

In addition to the required fields, you can add some optional fields in order to have more details inside your transaction.

* **Shipping (ts)** : Refers to the ***shipping*** field (ex : **5.99** of the event inside [this doc](https://developers.google.com/analytics/devguides/collection/ga4/set-up-ecommerce)).
* **Transaction tax rate (tt)** : Refers to the ***tax*** field (ex : **4.90** of the event inside [this doc](https://developers.google.com/analytics/devguides/collection/ga4/set-up-ecommerce)).
* **Currency (tc)**: Refers to the ***currency*** field (ex : **USD** of the event inside [this doc](https://developers.google.com/analytics/devguides/collection/ga4/set-up-ecommerce)).
* **Coupon Code (tcc)**: Refers to the ***coupon*** field (ex : **SUMMER\_SALE** of the event inside [this doc](https://developers.google.com/analytics/devguides/collection/ga4/set-up-ecommerce)).
* **Payment method (pm)**: Define which method the visitor uses to pay. There’s no native link with the purchase method of GA4.
* **Shipping method (sm)**: Define which shipping method the visitor wants to have. There’s no native link with the purchase method of GA4.
* **Array of items (items)**: Coincides with the key corresponding to the array of objects of all items purchased during the transaction and their information. Allows you to define the following:
  * **Item name (in)** : Coincides with the name of the item purchased.
  * **Item price (ip)** : Coincides with the price of the item purchased.
  * **Item quantity (iq)** : Coincides with the number of times an item was purchased during the transaction.
  * **Item SKU (ic)** : Coincides with the product reference (SKU or product ID) of the item purchased.
  * **Item category (iv)** : Coincides with the category of the item purchased.

### Matching between the purchase GA4 event and the transaction Hit from AB Tasty <a href="#h_01j4re4rmcc4em00cf3snew7ty" id="h_01j4re4rmcc4em00cf3snew7ty"></a>

#### Native purchase GA4 event <a href="#h_01j4re4rmczmra0nf3z0f865zr" id="h_01j4re4rmczmra0nf3z0f865zr"></a>

If you have some purchase events from GA4 with the **same structure** as in the screenshot (or inside the documentation of GA4), you don’t need to edit the fields. The only action you have to is:

* Define one Transaction Name (not necessarily *purchase*. It’s at your discretion)
* Click Save

#### Custom purchase GA4 event <a href="#h_01j4re4rmcgc90ngrnpn3m9n8h" id="h_01j4re4rmcgc90ngrnpn3m9n8h"></a>

You can have another structure for your purchase event. **The only requirement is that the name of the event must be&#x20;*****purchase*****.**

**USE CASE 1**

If you have another structure, you could define by yourself the correct key. Let’s imagine you have one purchase event with this structure:

<pre><code><strong>gtag("event", "purchase", {
</strong><strong>                 transactionID: "T_12345_2",
</strong><strong>                 value: 30.03,
</strong><strong>                 tax: 4.90,
</strong><strong>                 shipping: 5.99,
</strong><strong>                curr: "USD",
</strong><strong>   coupon_discount: "SUMMER_SALE",
</strong><strong>                 articles: [.....]
</strong><strong>          });
</strong><strong>      });
</strong></code></pre>

You must enter the correct values inside the input. To illustrate and to track Coupon code (tcc) the correct input in our modal would be as follows: Coupon Code (tcc) : coupon\_discount

**USE CASE 2 (Managing the dot (“.”) inside a key)**

For any reason, you could have another structure with some sub-objects. Let’s imagine your purchase event has this kind of structure:

<pre><code><strong>gtag("event", "purchase", {
</strong><strong> transaction : {
</strong><strong>  id: T_12345_2
</strong><strong> },
</strong><strong> financial : {
</strong><strong>  tax: 4.90,
</strong><strong>value: 30.03,
</strong><strong>shipping: 5.99,
</strong><strong>tax: 4.90,
</strong><strong>curr: "USD",
</strong><strong>},
</strong><strong>order: {
</strong><strong>coupon: "SUMMER_SALE",
</strong><strong>},
</strong><strong>articles: [...]
</strong><strong>});
</strong></code></pre>

If you have some sub-objects, we are able to retrieve the associated value. Indeed, thanks to the dot (“.”), you can go inside a deeper object. That’s why, for this case, you could configure the rule of transaction tracker like this: order.coupon

## Retrieving the transaction hit on your own website <a href="#h_01j4reybh71pw60w2qpesvqat8" id="h_01j4reybh71pw60w2qpesvqat8"></a>

{% hint style="info" %}
**URL Page**

We are able to catch any purchase event on all pages, and it’s not specific to the checkout URL page. If your IRL is /checkout or /confirmation, or anything else, it’s not a problem. The only requirements are:

* Having a purchase event with the name *purchase*
* This event must be pushed inside the DataLayer used to create the transaction tracker and connected to AB Tasty
  {% endhint %}

### Check the AB Tasty hit <a href="#h_01j4re4rmdjscmb80762jyyb3f" id="h_01j4re4rmdjscmb80762jyyb3f"></a>

Once a transaction is done on your website, and the purchase event is pushed inside your DataLayer, automatically, an AB Tasty hit (ariane.abtasty.com) is also sent into our AB Tasty collect. You can check it inside the network tab:

<img src="/files/TLcUbN2p3jYGvO3KFP7S" alt="" width="563">

A TRANSACTION hit will be sent into your AB Tasty account.

## Retrieving the transaction hit inside AB Tasty <a href="#h_01j4rf5bv4ncwz51vmdpyx5mrd" id="h_01j4rf5bv4ncwz51vmdpyx5mrd"></a>

Once a TRANSACTION hit is sent into your AB Tasty account, you will retrieve the transaction affiliation inside your Goal manager.

On this page : <https://app2.abtasty.com/settings/goals-management?transaction> , all transaction affiliations are available.

<img src="/files/dMtcmmz3EWqiIYtPcaNC" alt="" width="563">

Here is an example of a transaction affiliation based on the transaction rule you have set up with the transaction tracker. You can see that the name of the transaction affiliation is exactly the same as the name of the transaction tracker you configured before.

The transaction affiliation will be displayed as soon as a few transaction hits will be sent into your AB Tasty account via our collect (cf. checking the AB Tasty hit).

As soon as a transaction affiliation is available, you are able to:

* Add the transaction tracker as a goal for your campaigns
* Export the listing of all your transactions from the Data Explorer.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/account/how-to-implement-the-transaction-tag/how-to-create-a-transaction-tracker-via-datalayer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
