This section provides examples to explain how you can send the data to CDP for each website event that you want to track through the CDP WebTag Library.
As described in the Adding the CDP WebTag to your website, this section contains examples that showcase the model-oriented implementations.
Product Browsed
For this event, you need to send the following data to CDP:
- A customer object: It must contain a customer identifier,
SourceCustomerNumber
orEmail
. - An event instance of type
productBrowsed
. It must contain aTarget
with theSourceProductNumber
set and a customer instance.
The following is the 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,
targets: productABC123
})
.send();
It implies that the current visitor is identified as “john.doe@gmail.com” and the customer SourceCustomerNumber
is “123”. Using this information, CDP can now tie this customer “123” and all the actions to the person “john.doe@gmail.com”, thus enabling CDP to target that person in campaigns based on the customer’s web behavior.
It also means that the customer “123” viewed the product “ABC123”.
Category Browsed
For this event, you need to send the following data to CDP:
- A customer object: It must contain a customer identifier,
SourceCustomerNumber
orEmail
. - An event instance of type
categoryBrowsed
with theSourceProductCategoryNumber
attribute set and a customer instance.
The following is the 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();
It means that the customer “123” viewed the category “Category456”.
Cart Updates
For this event, you need to send the following data to CDP:
- A customer object: It must contain a customer identifier:
SourceCustomerNumber
orEmail
. - An event instance of type cartUpdated with the
SourceProductNumber
set and a customer instance. - In the following example, CDP assumes that the visitor is already identified and CDP can reuse that customer instance.
The following is the example of implementation using the model-oriented approach:
var myEvent = $A1.Event({
type: "cartUpdated",
customer: currentVisitor,
targets: productABC123
});
myEvent.send();
It implies that the customer “123” has added product “ABC123” to their cart. If customer “123” adds another product “DEF456” to their cart, here is the additional Javascript that you must execute:
var productDEF456 = $A1.Target({SourceProductNumber: "DEF456"});
myEvent.add("targets", productDEF456).send();
It implies that there are two cart updates. Customer “123” added products “ABC123” and “DEF456”. If this customer “123” adds another product “GHI789” to the cart, and removes product “DEF456”, here is the additional Javascript that you must execute:
var productGHI789 = $A1.Target({SourceProductNumber: "GHI789"});
myEvent.add("targets", productGHI789).send();
myEvent = $A1.Event({
type: "cartUpdated",
customer: currentVisitor,
targets: [productABC123,productGHI789]
});
myEvent.send();
Any update to the cart or the contents of the cart triggers a cartUpdated
event with a set of targets that correspond to the list of products currently in the cart. This is because CDP does not keep track of the state of the cart and therefore not “infer” the content of the cart from past updates.
Checkout
For this event, you need to send the following data to CDP:
- In this example, CDP assumes that the visitor is already identified and CDP can reuse that customer instance.
- An event instance of type checkout including a customer, a transaction, and a set of targets.
- Optional: A set of target entities that represent the transaction items with the appropriate attributes set, SourceTransactionItemNumber, SourceProductNumber, and Type.
- Optional: A transaction instance with the appropriate attributes set, SourceTransactionNumber and Total.
The following is the 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
// send the event
$A1.Event({
type: “checkout”,
customer: currentVisitor,
transaction: transactionWEB958,
targets: [item1, item2]
}).send();
It implies that customer “123” placed a transaction “WEB958” for a total revenue of $345. This transaction contains two transaction items. “WEB958-1” containing two products “555” for a total revenue of $321.13. “WEB958-2” containing product “667” for a total revenue of $23.87.
Note
Only send Transactions
and TransactionItem
entities if the SourceTransactionNumber
and SourceTransactionItemNumber
values correspond to what you are sending to CDP in the standard Transaction feed and standard Transaction Item feed. Otherwise, if the same transactions come through the WebTag with different identifiers, it creates a new transaction in CDP. This transaction is the duplicate of another transaction, thus doubling any revenue or transaction count or other metrics.
If you do not want to send transactions, but still want to send a checkout
event, you must give a SourceTransactionNumber
to the event otherwise CDP throws an API error stating that checkout
events require transactions
. To overcome this restriction, use the following code. It essentially tells the API to consider that there is a transaction attached to the event with SourceTransactionNumber = ''
, that is, an empty string that never ties to any real transaction.
var currentVisitor = $A1.Customer({
SourceCustomerNumber: '123456',
Email: '[email protected]'
});
$A1.Event({
type: "checkout",
customer: currentVisitor,
targets:{
SourceTransactionNumber: ''
}
}).send();
Onsite Search
For this event, you need to send the following data to CDP:
- A customer object: It must contain a customer identifier,
SourceCustomerNumber
orEmail
. - An event instance of type
onsiteSearch
with theSearchTerm
attribute set and a customer instance.
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();
It implies that the current visitor, “john.doe@gmail.com” has made a search on your website. The customer searched using the term “C1S1H001”.
Next Steps - CDP Entities
To understand in depth what data you can send through these calls, in particular which attributes are standard, see CDP Entities.