Adding the webtag to your website¶

The following are the three WebTag components of Customer Data Platform (CDP):

Javascript SDK or WebTag Library: This is included on your website’s pages
Authentication scheme
Javascript models provided by the CDP WebTag Library: This is leveraged with specific data payloads to send event data to CDP.

This following sections explain the implementation of each component:

Adding the CDP WebTag Library to your pages
Implementing the CDP WebTag authentication
Tracking events

Adding the CDP WebTag Library to your pages¶

CDP provides a Javascript SDK or WebTag Library to track events on your website. This takes the form of a Javascript file that you must include with a configuration script on every page where you need to track events.

You can include the SDK anywhere in your HTML pages using two <script> tags. Acquia recommends placing it near the bottom of your page header, that is, between the <head> tags so that it does not block other scripts but is available for the entire page to use.

The following code displays the look of the page:

<!doctype html>
<html>
 <head>
 …
     <script>
         var $A1Config = {
             key: “yourKeyHere”,
             tenantId: yourTenantId (e.g. 999)
         };
     </script>
     <script src=”https://scripts.agilone.com/latest/a1.js”></script>
 </head>
 <body>
 …
 </body>
</html>

The first <script> tag is important to configure the WebTag Library on each of your pages through the $A1Config variable used by the library. It contains the following attributes :

key: This is related to the authentication mechanism.
tenantId: This is the identifier for your CDP tenant. CDP provides the tenantId during the implementation.

Implementing the CDP WebTag authentication¶

For information about implementing the authentication flow for your website, see Authentication for website and app implementations.

Tracking events¶

To reuse data across the page and application, CDP provides the following two ways to interact with the library:

Generic: Consists of passing a JSON payload containing all the necessary objects and attributes to the library. You can use this for custom events or actions.
Model-oriented: Represents different entities that need modification. Customers, transactions, events, and targets are leveraged to pass structured data to all other models. Each of these models accepts a set of attributes and targets. You can reuse the objects across pages. For example, if the customer browses a product and adds the product to the cart on the same page, you can define that customer object and product (target) object once and reuse it for both events.

The following is the high-level process of tracking an event:

Initializing an instance of the customer model or reusing an instance of that customer if it was already initialized earlier.
Creating the target and optionally the transaction model instances that contain the data corresponding to the event being tracked.
Creating the event instance to tie all this data together, and indicate which type of event is being tracked.
Sending the data to CDP.

Next steps - Identifying your visitors¶

After the authentication and basic setup is done, understand the information you need to send to CDP to identify all the activities on your website and tie to existing contacts for marketing purposes. For more information, see Identifying your website visitors.