This page provides instructions to configure WebTag Legacy manually.

Use the following checklist to configure WebTag Legacy:

The following implementation diagram helps you to understand the flow between your server, client, and Customer Data Platform (CDP):

Generating a Bcrypt access key

To secure each request to the CDP service API, you must encrypt the authentication token. The token must be re-authenticated every 24 hours for CDP to continue to receive payloads from your website.

Use the following steps to generate a Bcrypt access key:

1. Combine the bearer token and the current date to create a string:
   BEARER_TOKENyyyy-MM-dd

   For example, the string created by combining ABCDEFG-HEFEG-DE3FGB and 2024-01-01 is ABCDEFG-HEFEG-DE3FGB2024-01-01.

   The current date must be used to create the string as the access key is valid for 24 hours.

2. Open Bcrypt Password Generator.

3. In the Password field, paste the string that you created.

   

4. Click Bcrypt.

   The string is hashed using the Bcrypt algorithm with 10 rounds. The resulting hash always begins with the prefix $2a$.

Testing the Bcrypt access key using Postman

As you are still using Postman and working in the staging environment to build the integration steps, you must manually test and understand the encryption setup with Bycrpt.

1. Download and open Postman.

2. Click the (+) icon to create a new collection.

   

3. Click the Ellipsis icon, click Rename, and then rename the folder collection to CDP Push Payload.

   

4. Click Add a request.

   
5. Click the Ellipsis icon, click Rename, and then rename the request to Scenario 1 - Pushing a WebTag Event Test.

6. Change the request to POST.

   

7. Enter your instance credentials and the host endpoint URL into Enter URL or paste text. 
   Ensure that the URL matches your cloud region and tenant type as previously saved.

Generating a Bcrypt access key through Node.js

On your server-side, you can use multiple methods to generate a Bcrypt access key. This key can be generated using various programming languages such as Python, Node.js, PHP, Ruby, or Java. For detailed instructions, refer to the developer documentation. 

This procedure provides the steps to create a Bcrypt access key through Node.js. Node.js provides several packages for bcrypt, with bcrypt and bcryptjs being the most widely used. bcrypt is a native Node module, while bcryptjs is entirely implemented in JavaScript.

1. To install bcrypt, visit npm install bcrypt.

   Acquia recommends an asynchronous approach. The following is a sample code:

   copy

   const bcrypt = require('bcrypt');
   const saltRounds = 10;
   const myPlaintextPassword = 's0/\/\P4$$w0rD';

2. Auto-generate a salt and hash:

   copy

   bcrypt.hash(myPlaintextPassword, saltRounds, function(err, hash) {
     // Store hash in your password DB.
     console.log(hash);
   });

Passing the access key to the front-end

The following are some of the methods to deliver the access key to your front-end:

• Embedding the key in the HTML sent to the client
• Including the key as a dynamic JavaScript variable
• Fetching the key through an API.

After generating the Bcrypt-hashed access key, pass it to the front-end as a populated tag.

• As a dynamic JavaScript variable:
  1. Use a templating engine such as Embedded JavaScript (EJS) in web development to generate HTML markup with plain JavaScript.

  2. Embed the hash within a script tag in your server-side rendered HTML template.

     copy

     <script>
       var hashFromServer = "<%= hashValue %>";
     </script>

  3. After the hash is available on the front-end, use it as required.

     For example, you can verify a value by comparing it against another hash. Ideally, Bcrypt hashes must be compared on the server for security reasons.

• For client-side applications:
  1. Fetch the key through an API call to your server if your application uses SPA frameworks such as React, Angular, Vue.js, Ember.js, or Svelte.

  2. Retrieve the hash through an API call to your server and dynamically assign it to the $A1Config.key value.

     copy

     <script>
         fetch('/api/get-hash').then(response => response.json()).then(data => {
             var $A1Config = {
                 key: "dynamic.hash.access.key", // Set dynamically after fetching
                 tenantId: 999, // Example set the static tenant ID(Ask Acquia if you don't know)
                 host: "//url.endpoint.com" // Set the service endpoint URL accordding to your hosted environment and cloud region.
             };
     
             // It's important to ensure this script is loaded after $A1Config is set
             var script = document.createElement('script');
             script.src = "https://scripts.agilone.com/latest/a1.js";
             document.head.appendChild(script);
         });
     </script>

     If CDP recommended approach do not fit your requirements, you must adhere to your company's policy and proceed.

Populating the Script Tag

Regardless of how the hash is sent to the front-end, you must ensure that the $A1Config variable is correctly filled with the Bcrypt hash value before loading the a1.js script that relies on it.

Embedding the Global WebTag Legacy script

On the main HTML domain page, embed the WebTag script within the <header> tags. This script coordinates with the SDK Library to request permissions to access CDP Tracker, thus triggering the subdomain page according to the configured event.

<script>
     var $A1Config = {
        key: "dynamic.hash.access.key", // Set dynamically after fetching.
        tenantId: 999, // Example set the static tenant ID.
       host: "//url.endpoint.com" // Set the service endpoint URL accordding to your hosted environment and cloud region.
     };
</script>
<script src="https://scripts.agilone.com/latest/a1.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:

Configuring WebTag Legacy manually

This page provides instructions to configure WebTag Legacy manually.

Use the following checklist to configure WebTag Legacy:

S.No.	Task	Description
1	Generate and test a Bcrypt access key	Generating a Bcrypt access key  Testing the Bcrypt access key using Postman
2	Automate the encryption mechanism.	Several frameworks are available to automate the Bcrypt encryption process. Generating a Bcrypt access key through Node.js Passing the access-key to the front-end
3	Embed the Global WebTag Legacy script within the <header> tags.	Embedding the Global WebTag Legacy script
4	Configure visitors object	Configuring visitors object
5	Configure tracking events	Refer to the Configuring tracking events section on the Configuring WebTag 2.0 page.

The following implementation diagram helps you to understand the flow between your server, client, and Customer Data Platform (CDP):

Generating a Bcrypt access key

To secure each request to the CDP service API, you must encrypt the authentication token. The token must be re-authenticated every 24 hours for CDP to continue to receive payloads from your website.

Use the following steps to generate a Bcrypt access key:

1. Combine the bearer token and the current date to create a string:
   BEARER_TOKENyyyy-MM-dd

   For example, the string created by combining ABCDEFG-HEFEG-DE3FGB and 2024-01-01 is ABCDEFG-HEFEG-DE3FGB2024-01-01.

   The current date must be used to create the string as the access key is valid for 24 hours.

2. Open Bcrypt Password Generator.

3. In the Password field, paste the string that you created.

   

4. Click Bcrypt.

   The string is hashed using the Bcrypt algorithm with 10 rounds. The resulting hash always begins with the prefix $2a$.

Testing the Bcrypt access key using Postman

As you are still using Postman and working in the staging environment to build the integration steps, you must manually test and understand the encryption setup with Bycrpt.

1. Download and open Postman.

2. Click the (+) icon to create a new collection.

   

3. Click the Ellipsis icon, click Rename, and then rename the folder collection to CDP Push Payload.

   

4. Click Add a request.

   
5. Click the Ellipsis icon, click Rename, and then rename the request to Scenario 1 - Pushing a WebTag Event Test.

6. Change the request to POST.

   

7. Enter your instance credentials and the host endpoint URL into Enter URL or paste text. 
   Ensure that the URL matches your cloud region and tenant type as previously saved.

Generating a Bcrypt access key through Node.js

On your server-side, you can use multiple methods to generate a Bcrypt access key. This key can be generated using various programming languages such as Python, Node.js, PHP, Ruby, or Java. For detailed instructions, refer to the developer documentation. 

This procedure provides the steps to create a Bcrypt access key through Node.js. Node.js provides several packages for bcrypt, with bcrypt and bcryptjs being the most widely used. bcrypt is a native Node module, while bcryptjs is entirely implemented in JavaScript.

1. To install bcrypt, visit npm install bcrypt.

   Acquia recommends an asynchronous approach. The following is a sample code:

   copy

   const bcrypt = require('bcrypt');
   const saltRounds = 10;
   const myPlaintextPassword = 's0/\/\P4$$w0rD';

2. Auto-generate a salt and hash:

   copy

   bcrypt.hash(myPlaintextPassword, saltRounds, function(err, hash) {
     // Store hash in your password DB.
     console.log(hash);
   });

Important

• Hashes are 60 characters long and include the salt among other parameters, as follows:$[algorithm]$[cost]$[salt][hash] eg. ($[2a]$[10]$[jabo.nDbVTCdWdHBU4Zy5e][gSDSa071vltbRlOpAwT4.K4siyAuJMi])

• CDP accepts hash-algorithm identifier => 2a = BCrypt and it must be a rounds=10: ~10 hashes/sec. If you use a different algorithm or cost round, the access fails and results in a 401 unauthorized response from the API endpoint.

• If Acquia's recommended approach is unsuitable for you, you must adhere to your company's policy and consult the instructions in the NPM documentation.

Passing the access key to the front-end

The following are some of the methods to deliver the access key to your front-end:

• Embedding the key in the HTML sent to the client
• Including the key as a dynamic JavaScript variable
• Fetching the key through an API.

After generating the Bcrypt-hashed access key, pass it to the front-end as a populated tag.

• As a dynamic JavaScript variable:
  1. Use a templating engine such as Embedded JavaScript (EJS) in web development to generate HTML markup with plain JavaScript.

  2. Embed the hash within a script tag in your server-side rendered HTML template.

     copy

     <script>
       var hashFromServer = "<%= hashValue %>";
     </script>

  3. After the hash is available on the front-end, use it as required.

     For example, you can verify a value by comparing it against another hash. Ideally, Bcrypt hashes must be compared on the server for security reasons.

• For client-side applications:
  1. Fetch the key through an API call to your server if your application uses SPA frameworks such as React, Angular, Vue.js, Ember.js, or Svelte.

  2. Retrieve the hash through an API call to your server and dynamically assign it to the $A1Config.key value.

     copy

     <script>
         fetch('/api/get-hash').then(response => response.json()).then(data => {
             var $A1Config = {
                 key: "dynamic.hash.access.key", // Set dynamically after fetching
                 tenantId: 999, // Example set the static tenant ID(Ask Acquia if you don't know)
                 host: "//url.endpoint.com" // Set the service endpoint URL accordding to your hosted environment and cloud region.
             };
     
             // It's important to ensure this script is loaded after $A1Config is set
             var script = document.createElement('script');
             script.src = "https://scripts.agilone.com/latest/a1.js";
             document.head.appendChild(script);
         });
     </script>

     If CDP recommended approach do not fit your requirements, you must adhere to your company's policy and proceed.

Populating the Script Tag

Regardless of how the hash is sent to the front-end, you must ensure that the $A1Config variable is correctly filled with the Bcrypt hash value before loading the a1.js script that relies on it.

Embedding the Global WebTag Legacy script

On the main HTML domain page, embed the WebTag script within the <header> tags. This script coordinates with the SDK Library to request permissions to access CDP Tracker, thus triggering the subdomain page according to the configured event.

copy

<script>
     var $A1Config = {
        key: "dynamic.hash.access.key", // Set dynamically after fetching.
        tenantId: 999, // Example set the static tenant ID.
       host: "//url.endpoint.com" // Set the service endpoint URL accordding to your hosted environment and cloud region.
     };
</script>
<script src="https://scripts.agilone.com/latest/a1.js"></script>

Parameter	Description
key	dynamic.hash.access.key is your server's Bcrypt hash value, dynamically retrieved through an API or plain JavaScript, and must be refreshed every 24 hours.
tenantId	1111, 2222, 3333 are numerical path identifiers that correlate with the tenant ID for account access.
host	//url.endpoint.com acts as the service endpoint, allowing users to push data to the appropriate environment and cloud services.
src	https://scripts.agilone.com/latest/a1.js invokes the old 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 subdomain cookie, potentially being flagged and blocked as a third-party cookie by Google policies. domain: ".ecme.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:

      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:

SourceCustomerNumber	Email	UUID	Source System	Name
12345	-	12345	WebTag	-
A34567	[email protected]	12345	WebTag	-
12345	[email protected]	12345	External Source	-
A34567	[email protected]	-	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	[email protected]	12345	ABC

https://api7.agilone.com/v2/xxxx/dw/tracker

https://api7.agilone.com/v2/xxxx/dw/tracker