Information for: DEVELOPERS   PARTNERS   SUPPORT

Examples of web event tracking

This section provides examples to explain how you can send Customer Data Platform (CDP) the right data for each website events that you want to track via the CDP Webtag Library. This section assumes you have read the section titled List of tracked events.

As described in the Adding the CDP Webtag to your website section above we provide examples below will showcase both the model-oriented implementations.

Product Browsed

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

  • A customer object. It should contain a customer identifier : SourceCustomerNumber or Email.
  • An event instance of type productBrowsed containing a Target with SourceProductNumber set, and including a customer instance (as defined above).

Here 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,
targets: productABC123
})
.send();

This will mean that the current visitor is actually identified as “john.doe@gmail.com” and the customer SourceCustomerNumber is “123”. Using this information, CDP can now tie this customer “123” and all his actions to the person “john.doe@gmail.com”, thus enabling CDP to target that person in campaigns based on his web behavior.

It also means that the customer “123” viewed product “ABC123”.

Category Browsed

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

  • A customer object. It should contain a customer identifier : SourceCustomerNumber or Email.
  • An event instance of type categoryBrowsed with the SourceProductCategoryNumber attribute set, and including a customer instance (as defined above).

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

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 should contain a customer identifier : SourceCustomerNumber or Email.
  • An event instance of type cartUpdated with SourceProductNumber set, and including a customer instance.
  • In our example below, we will assume that the visitor was already identified earlier and we can reuse that customer instance.

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

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

This will mean that customer “123” has added product “ABC123” to his cart. If customer “123” adds another product “DEF456” to his cart, here is the additional Javascript that should be executed using the model-oriented approach :

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

This will mean that 2 cart updates happened in total : customer “123” just added products “ABC123” and “DEF456”. If we imagine that this customer “123” adds yet another product “GHI789” to his cart, but then removes product “DEF456”, here is what the additional Javascript would look like using the model-oriented approach :

..code-block:: text

var productGHI789 = $A1.Target({SourceProductNumber: “GHI789”}); myEvent.add(“targets”, productGHI789).send();

myEvent = $A1.Event({ type: “cartUpdated”, customer: currentVisitor, targets: [productABC123,productGHI789] }); myEvent.send();

In short, any update to the cart or the contents of the cart should trigger 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 will 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, we will assume that the visitor was already identified earlier and we can reuse that customer instance.
  • An event instance of type checkout including a customer, a transaction, and a set of targets.
  • (Optional - read below for more information) : A set of target entities that represent the transaction items with the appropriate attributes set (SourceTransactionItemNumber, SourceProductNumber, Type, etc…).
  • (Optional - read below for more information) : A transaction instance with the appropriate attributes set (SourceTransactionNumber, Total, etc…).

Here 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

// send the event
$A1.Event({
    type: “checkout”,
    customer: currentVisitor,
    transaction: transactionWEB958,
    targets: [item1, item2]
}).send();

This means that customer “123” placed a transaction “WEB958” for a total revenue of $345. This transaction contained 2 transaction items : “WEB958-1” containing 2 products “555” for a total revenue of $321.13, and “WEB958-2” containing 1 product “667” for a total revenue of $23.87.

Important note on sending Transactions and TransactionItem entities : only send those 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 via the webtag with different identifiers, it will create a new transaction in CDP that will be an exact duplicate of another transaction, thus doubling any revenue/transaction count/ other metrics.

If you are indeed in the case described above (i.e. you do not want to send transactions, but still want to send a checkout event), you will still need to give a SourceTransactionNumber to the event otherwise you will get an API error telling you that checkout events require transactions to be provided. To work-around this restriction, use the following trick. It essentially tells the API to consider that there is a transaction attached to the event with SourceTransactionNumber = '' (i.e. an empty string that will never tie to any real transaction) :

var currentVisitor = $A1.Customer({
                    SourceCustomerNumber: '123456',
                    Email: '[email protected]'
                    });

                $A1.Event({
                    type: "checkout",
                    customer: currentVisitor,
                    targets:{
                            SourceTransactionNumber: ''
                            }
                    }).send();

Next Steps - CDP Entities

To understand in depth what data you can send via those calls, in particular which attributes are standard, which ones can be included, etc… please read the article : CDP Entities.