This page provides instructions to configure WebTag 2.0 manually.

Use the following checklist to configure WebTag 2.0:

Embedding the Global WebTag 2.0 script

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>

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:

      copy

      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: "[email protected]", // 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: "[email protected]", // Customer email address value.
        // Add Other data points in this object
      };

   2. Javascript code snippet visitor anonymous as logged out from the site:

      copy

      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: "[email protected]", // 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:

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

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

  
  copy

  var currentVisitor = $A1.Customer({
      SourceCustomerNumber: "123",
      Email: “[email protected]” // Key ”Email” with a capital “E”
  });

  
  copy

  var currentVisitor = $A1.Customer({
      SourceCustomerNumber: "123",
      email: “[email protected]” // 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. 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 included in the Event entity.

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: “[email protected]” // 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: “[email protected]”
}); //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: “[email protected]”
}); //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.

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: "[email protected]",
   Email: "[email protected]"
});
var searchTerm = $A1.Target({
   SearchTerm: document.getElementById('sterm').value
});
$A1.Event({
   type: "onsiteSearch",
   customer: visitor,
   targets: searchTerm
})
.send();

This indicates that the current visitor, "[email protected]," 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 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.

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>

Configuring WebTag 2.0 manually

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

var currentVisitor = $A1.Customer({
   SourceCustomerNumber: "123", // Customer unique value.
   Email: “[email protected]” // 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();

var currentVisitor = $A1.Customer({
   SourceCustomerNumber: "123",
   Email: “[email protected]”
}); //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();

var currentVisitor = $A1.Customer({
   SourceCustomerNumber: "123",
   Email: “[email protected]”
}); //define a customer instance
$A1.Event({
   type: “categoryBrowsed”,
   customer: currentVisitor,
   SourceProductCategoryNumber: "Category456"
})
.send();

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

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

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

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();

var visitor = $A1.Customer({
   SourceCustomerNumber: "[email protected]",
   Email: "[email protected]"
});
var searchTerm = $A1.Target({
   SearchTerm: document.getElementById('sterm').value
});
$A1.Event({
   type: "onsiteSearch",
   customer: visitor,
   targets: searchTerm
})
.send();

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