---
title: "Configuring WebTag 2.0 manually"
date: "2024-11-22T01:16:08+00:00"
summary: "Learn to configure WebTag 2.0 manually with step-by-step instructions for embedding scripts, setting up visitor objects, and tracking events."
image:
type: "page"
url: "/customer-data-platform/configuring-webtag-20-manually"
id: "933de292-1663-4095-ab20-c6b166484a9c"
---

This page provides instructions to configure WebTag 2.0 manually.

Use the following checklist to configure WebTag 2.0:

S.No.

Task

Description

1

Embed the Global WebTag 2.0 script within the `<header>` tags.

[Embedding the Global WebTag 2.0 script](#global-webtag-2.0-scripts)

2

Configure visitors object

[Configuring visitors object](#configure-vistor's-object)

3

Configure tracking events

*   [Event tracking key points](#event-tracking-key-points)
*   [Configure login/logout snippet code](#configure-login-logout)
*   [Configure productBrowsed snippet code](#configure-productBrowsed )
*   [Configure categoryBrowsed snippet code](#configure-categoryBrowsed)
*   [Configure cartUpdates snippet code](#configure-cartUpdates)
*   [Configure checkout snippet code](#configure-checkout)
*   [Configure onsiteSearch snippet code](#configure-onsiteSearch)
*   [Configure custom event snippet code](#configure-custom-event)

Embedding the Global WebTag 2.0 script
--------------------------------------

Important

Unlike WebTag Legacy, your Webtag ID will not expire in WebTag 2.0. Therefore, you do not need to retrieve new tokens in WebTag 2.0.

On the main HTML domain page, insert the webtag script within the `<header>` tags. This script synchronizes the calling mechanism with the SDK Library to request access to CDP Tracker, triggering the subdomain page based on the specified event.

    <script>
        var $A1Config = {
            webtagId: "your-webtag-id", // Paste your webtagId value provided by Acquia.
            tenantId: 999, // Example set the static tenant ID.
            host: "https://url.endpoint.com" // Set the service endpoint URL accordding to your hosted environment and cloud region.
         };
    </script>
    <script src="https://scripts.agilone.com/latest/acquia-cdp-webtag.js"></script>

**Parameter**

**Description**

webtagId

`webtagId` is the Webtag ID provided by your Acquia representative.

tenantId

`1111, 2222, 3333` are numerical path identifiers that correlate with the tenant ID for account access.

host

`https://url.endpoint.com` acts as the service endpoint, allowing users to push data to the appropriate environment and cloud services. Ex: https://api7.agilone.com/

src

`https://scripts.agilone.com/latest/acquia-cdp-webtag.js` invokes the new CDP SDK script.

domain (optional)

*   `.acme.com` serves as the default main domain for setting up CDP tracking mechanism as a first-party cookie. If you omit it, it might default to a sub-domain cookie, potentially being flagged and blocked as a third-party cookie by Google policies.
    
*   `domain: ".acme.com", // Set the static main domain(no subdomain).`
    

Configuring visitors object
---------------------------

The code to capture the unique ID and store it in a session must be placed on each subpage of your main website page where you want to track visitor interactions. This can be part of your website's global header or another common include that runs before the page content is fully rendered.

1.  Capture the Unique ID:
    1.  Javascript code snippet **visitor identify** as logged in to the site:
        
            var currentVisitor = $A1.Customer ( {
                SourceCustomerNumber: "6952E515-B67C-CB1B-3B21-GRG9GBN0LN8DF", // Customer Unique ID can be either an email address or a numerical value.
                UUID: "6952E515-B67C-CB1B-3B21-GRG9GBN0LN8DF", // Duplication of Customer Unique ID can be either an email address or a numerical value.
                Email: "sample@acquia.com", // Customer email address value.
               // Add Other data points in this object
            } );
             
            $A1.event = {
                SourceCustomerNumber: "6952E515-B67C-CB1B-3B21-GRG9GBN0LN8DF", // Customer Unique ID can be either an email address or a numerical value.
                Email: "sample@acquia.com", // Customer email address value.
              // Add Other data points in this object
            };
        
    2.  Javascript code snippet **visitor anonymous** as logged out from the site:
        
            var currentanonymousVisitor = $A1.Customer ( {
               SourceCustomerNumber: "6952E515-B67C-CB1B-3B21-GRG9GBN0LN8DF", // Customer Unique ID can be either an email address or a numerical value.
               UUID: "6952E515-B67C-CB1B-3B21-GRG9GBN0LN8DF", // Duplication of Customer Unique ID can be either an email address or a numerical value.
            } );
            
            $A1.event = {
               SourceCustomerNumber: "6952E515-B67C-CB1B-3B21-GRG9GBN0LN8DF", // Customer Unique ID can be either an email address or a numerical value.
               Email: "sample@acquia.com", // Customer email address value.
              // Add Other data points in this object
            };
        
2.  Store the Unique ID in your website's session.
    
    This usually involves setting a session cookie with the unique ID value, ensuring it remains throughout the visitor's browser session.
    
3.  Send the Unique ID to CDP using the CDP WebTag library or the DW Tracker API.
    
    Ensure that you include the unique identifier and any relevant visitor information in the payload of an HTTP call to CDP. The data structure within the payload depends on whether the visitor is logged in to your website.
    

### Sample explanation

Consider that CDP receives the following values:

SourceCustomerNumber

Email

UUID

Source System

Name

12345

\-

12345

WebTag

\-

A34567

sample@acquia.com

12345

WebTag

\-

12345

sample@acquia.com

12345

External Source

\-

A34567

sample@acquia.com

\-

Customer Data Source

ABC

CDP maps the received values from the **Customer feed - External Source** to **SourceCustomerNumber** and **UUID**. This results in the following customer summary record:

Master Customer

Email

UUID

Name

12345|A34567

sample@acquia.com

12345

ABC

Event tracking key points
-------------------------

*   The payload of each event contains required and optional attributes that vary by event type. If an attribute is not applicable or the data is not available on certain pages, do not include those attributes.
*   Review the website or mobile app to implement relevant events. 
    
    For example, use a **cartUpdated** event for **Quick Add to Cart** clicks, a **productBrowsed** event for **Quick View** clicks, and a **login** event when a form is filled out with an email address. The CDP implementation team can assist with tracking these events on your website or mobile app.
    
*   Identify visitors for every event. Whenever possible, include a customer entity with each event in every call.
*   Attributes and values sent to the SDK are case-sensitive. For example, when identifying a customer's email, send the details to the CDP, and ensure that the "Email" payload object starts with a capital "E."
    
    ![cdp_correct-payload.png](https://acquia.widen.net/content/7db51e39-553a-4c15-86f3-2ac3292d9227/web/cdp_correct-payload.png?w=220&itok=4BUHH2RI)
    
        var currentVisitor = $A1.Customer({
            SourceCustomerNumber: "123",
            Email: “sample@acquia.com” // Key ”Email” with a capital “E”
        });
    
    ![cdp_incorrect-payload.png](https://acquia.widen.net/content/4a384701-c43e-49a5-a8b8-0253d6bc52d7/web/cdp_incorrect-payload.png?w=220&itok=IPgscO-P)
    
        var currentVisitor = $A1.Customer({
            SourceCustomerNumber: "123",
            email: “john.doe@gmail.com” // Key ”email” with a lower case “e”
        });
    
*   Do not initialize an object if you do not intend to send it. 
    
    For instance, if transactions do not match the attributes and you do not plan to send them through the WebTag, avoid initializing a `` `$A1.Transaction({})` `` object. For details on multiple source systems, refer to the warnings in [CDP entities](/customer-data-platform/data-mapping "Data Mapping"). CDP adds `` `SourceTransactionNumber` `` to the event object using targets. CDP does not add anything to the Transaction entity but adds information to the Event and Customer entities with `` `SourceTransactionNumber` `` included in the Event entity.
    
*   Besides the entities you send to the CDP, the SDK collects the following additional information with each request:
    *   UserAgent - This is collected from the browser, if available.
    *   UserClient - This defaults to "B" representing "browser".

Configuring tracking events
---------------------------

### Configure login or logout snippet code

For this event, you must send the following data to CDP:

*   **A customer object**: It must include a customer identifier, either `SourceCustomerNumber` or `Email`.
*   **An event instance of type login or logout**: It must include a `Target` with the `SourceProductNumber` set and a customer instance.

The following is an example of implementation using the model-oriented approach:

    var currentVisitor = $A1.Customer({
       SourceCustomerNumber: "123", // Customer unique value.
       Email: “sample@acquia.com” // Customer email address value.
    }); //define a customer instance
    $A1.Event({
       type: “login”, // Change to logout or login as needed
       customer: currentVisitor, // Customer engagment value.
       targets: productABC123 // Customer target product value.
    })
    .send();

### Configure productBrowsed snippet code

For this event, you must send the following data to CDP:

*   **A customer object**: It must include a customer identifier, either `SourceCustomerNumber` or `Email`.
*   **An event instance of type** `productBrowsed`: It must include a `Target` with the `SourceProductNumber` set and a customer instance.

The following is an example of implementation using the model-oriented approach:

    var currentVisitor = $A1.Customer({
       SourceCustomerNumber: "123",
       Email: “sample@acquia.com”
    }); //define a customer instance
    var productABC123 = $A1.Target({
       SourceProductNumber: "ABC123"
    }); //define the target for this event, ie the product being browsed
    $A1.Event({
       type: “productBrowsed”,
       customer: currentVisitor, // Customer engagment value.
       targets: productABC123 // Customer target product value.
    })
    .send();

### Configure categoryBrowsed snippet code

For this event, you must send the following data to CDP:

*   **A customer object**: It must include a customer identifier, such as `SourceCustomerNumber` or `Email`.
*   **An event instance of type** `categoryBrowsed`: It must contain the `SourceProductCategoryNumber` attribute and a customer instance.

The following is an example of implementation using the model-oriented approach:

    var currentVisitor = $A1.Customer({
       SourceCustomerNumber: "123",
       Email: “sample@acquia.com”
    }); //define a customer instance
    $A1.Event({
       type: “categoryBrowsed”,
       customer: currentVisitor,
       SourceProductCategoryNumber: "Category456"
    })
    .send();
    

### Configure cartUpdates snippet code

For this event, you must send the following data to CDP:

*   **A customer object**: It must include a customer identifier, either `SourceCustomerNumber` or `Email`.
*   **An event instance of type** `cartUpdated`: It must contain the `SourceProductNumber` and a customer instance.

In the following example, CDP assumes that the visitor is already identified and can reuse that customer instance.

The following is an example of implementation using the model-oriented approach:

    var myEvent = $A1.Event({
       type: "cartUpdated",
       customer: currentVisitor,
       targets: productABC123
    });
    myEvent.send();

This indicates that customer "123" has added product "ABC123" to their cart. If customer "123" adds another product "DEF456" to their cart, execute the following additional JavaScript:

    var productDEF456 = $A1.Target({SourceProductNumber: "DEF456"});
    myEvent.add("targets", productDEF456).send();

This indicates two cart updates. The customer "123" has added products "ABC123" and "DEF456." If customer "123" adds another product "GHI789" to the cart and removes "DEF456," execute the following additional JavaScript:

    var productGHI789 = $A1.Target({SourceProductNumber: "GHI789"});
    myEvent.add("targets", productGHI789).send();
    myEvent = $A1.Event({
       type: "cartUpdated",
       customer: currentVisitor,
       targets: [productABC123,productGHI789]
    });
    myEvent.send();
    

Any change to the cart or its contents triggers a `cartUpdated` event, which includes a set of targets that reflect the list of current products present in the cart. This is because CDP does not track the cart's state and cannot infer its content from previous updates.

### Configure checkout snippet code

For this event, you must send the following data to CDP:

In the following example, CDP assumes that the visitor is already identified and can reuse the customer instance.

*   An event instance of type checkout includes a customer, a transaction, and a set of targets.

Optional:

*   A set of target entities representing the transaction items, with attributes set as `SourceTransactionItemNumber`, `SourceProductNumber`, and `Type`.
*   A transaction instance with `SourceTransactionNumber` and `Total` attributes set.

The following is an example of implementation using the model-oriented approach:

    var item1 = $A1.Target({
       SourceTransactionItemNumber: "WEB958-1",
       Type: “Purchase”,
       Subtype: “Pending”,
       SourceProductNumber: "555",
       quantity: 2,
       saleRevenue: 321.13,
       discount”: 0.00
    }); //defining a transactionItem to be included in the checkout event
    var item2 = $A1.Target({
       SourceTransactionItemNumber: "WEB958-2",
       Type: “Purchase”,
       Subtype: “Pending”,
       SourceProductNumber: "667",
       quantity: 1,
       saleRevenue: 23.87,
       discount: 0.00
    }); //defining another transactionItem to be included in the checkout event
    var transactionWEB958 = $A1.Transaction({
       SourceTransactionNumber: "WEB958",
       SourceOrganizationNumber: "12",
       Type: “Purchase”
    }); //defining the transaction
    $A1.Event({
       type: “checkout”,
       customer: currentVisitor,
       transaction: transactionWEB958,
       targets: [item1, item2]
    })// send the event
    .send();

This indicates that customer "123" conducted a transaction "WEB958" with a total revenue of $345. The transaction includes two items: 

*   "WEB958-1" contains two products "555" with total revenue of $321.13
*   "WEB958-2" contains product "667" with total revenue of $23.87.

Note

*   You must send `Transactions` and `TransactionItem` entities only if the `SourceTransactionNumber` and `SourceTransactionItemNumber` values match those sent to the CDP in the [standard Transaction feed](https://docs.acquia.com/customer-data-platform/data-integration/sftp/transaction-feed "https://docs.acquia.com/customer-data-platform/data-integration/sftp/transaction-feed") and [standard Transaction Item feed](https://docs.acquia.com/customer-data-platform/integration-and-data-collection/api-integration/sftp/transaction-item-feed.html "https://docs.acquia.com/customer-data-platform/integration-and-data-collection/api-integration/sftp/transaction-item-feed.html").
*   If the transactions come through the WebTag with different identifiers, it creates a new transaction in the CDP, resulting in duplicate transactions and double-counting of revenue, transaction counts, or other metrics.
*   If you send a checkout event without including transactions, you must provide a `SourceTransactionNumber` to avoid an API error from the CDP, as checkout events mandate transactions. To bypass this requirement, use this checkout snippet code. This informs the API to associate the event with a transaction by setting `SourceTransactionNumber` to an empty string, which does not link to any actual transaction.

### Configure onsiteSearch snippet code

For this event, you must send the following data to CDP:

*   **A customer object**: It must include a customer identifier, such as `SourceCustomerNumber` or `Email`.
*   **An event instance of type** `onsiteSearch`: It must have the `SearchTerm` attribute set and a customer instance.

The following is an example of implementation using the model-oriented approach:

    var visitor = $A1.Customer({
       SourceCustomerNumber: "john.doe@agilone.com",
       Email: "john.doe@agilone.com"
    });
    var searchTerm = $A1.Target({
       SearchTerm: document.getElementById('sterm').value
    });
    $A1.Event({
       type: "onsiteSearch",
       customer: visitor,
       targets: searchTerm
    })
    .send();

This indicates that the current visitor, "john.doe@gmail.com," conducted a search on your website. The search term used by the customer was "C1S1H001".

### Configure custom event snippet code

CDP WebTag allows for the transmission of custom attributes on standard [CDP entities](/customer-data-platform/data-mapping "Data Mapping") or the creation of custom events based on your business needs.

CDP must be configured with these custom attributes before they can be included in the WebTag's event payload. These attributes can include information related to standard entities on your website, such as the payment method used by customers for transactions.

Important

If you are uncertain whether custom attributes are configured in CDP, consult your CDP team and do not implement these attributes in your WebTag installation, as this could cause API errors and block events from being sent to CDP.

**Sending custom attributes on standard entities**

You must send information to the WebTag only if it serves as the authentic source for that data. Data can be overwritten if it comes from multiple sources because CDP always takes the latest values regardless of the data source.

**Events, Customer, Transaction, and Target entities**

In the following example, consider that you are implementing a custom attribute called "paymentMethod" with the value "Visa" on a transaction entity.

All standard entities supported by the SDK models can include custom attributes.

The following is an example of implementation using the model-oriented approach:

    <script>
    // Define the transaction
    var currentTransaction = $A1.Transaction({
       SourceTransactionNumber: "WEBORDER-789",
       SourceOrganizationNumber: "ORG098",
       type: “Purchase”,
           saleRevenue: 195.00,
           discount: 20.00,
           tax: 19.50,
           paymentMethod: "Visa"
       });
    // Attach the transaction to the "checkout" event (assuming the customer and the transaction items have already been defined earlier)
    var checkoutEvent = $A1.Event("checkout", {
       customer: currentVisitor,
       transaction: currentTransaction,
       targets: [item1, item2],
       ...
    });
    </script>