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.

   

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

   Cloud Region	URL Endpoint	Parameter Description
   AWS	api7.agilone.com	/v2 indicates the latest version path of the host API. /xxxx indicates the tenant numerical identifier correlating to the tenant ID for accessing account. For more information, contact Acquia support. /dw/tracker indicates the path to the data warehouse (dw), pointing towards service named tracker.

8. Enter the following in Query Params to be added to the URL:

   Key: scheme, Value: a1webtag

   Key: accessKey, Value: 'PASTE-BCRYPT-ACCESSKEY'

   

   The system adds the parameters to the URL:

   https://api7.agilone.com/v2/xxxx/dw/tracker?scheme=a1webtag&accessKey=paste-bcrypt-accesskey

   Cloud Region	URL Endpoint	Parameter Description
   AWS	api7.agilone.com	? indicates the beginning of the query string, which contains the parameters. scheme=a1webtag is a parameter that specifies the authentication or authorization scheme to be used. It informs the server that the request is being made under the a1webtag scheme, and may possibly affect how the token is generated or what permissions are associated with it. accessKey=paste-bcrypt-accesskey is the manual Bcrypt access key you generated.

9. Replace the paste-bcrypt-accesskey text with the access key that you generated previously.

   

10. Click the Authorization tab and select the Type as No Auth.

    

11. Click the Headers tab.

12. Add Key as Content-Type and Value as application/json.

    

13. Click Pre-request Script and enter the JavaScript code to automatically generate current date as an epoch variable:

    copy

    function epoch (date) {
      pm.collectionVariables.set("epochVariable", Date.parse(date))
    
          console.log(pm.collectionVariables.get("epochVariable"))
    }
    
    const dateToday = new Date() 
    const timestamp = epoch(dateToday)

14. Click Body.

    1. Select Raw.

       

    2. Select JSON and enter the following code:

       copy

       {
            "events":
           [
                {
                 "SourceSystemID":"WebTag",  
                 "Cookie": "a1cookie",
                 "EventTimeStamp": {{epochVariable}},
                 "Type": "productBrowsed",
                 "SourceCustomerNumber": "6952E515-B67C-CB1B-3B21-GRG9GBN0LN8DF",
                 "sourceproductnumber": "[email protected]"
                }
           ],
            "customers":
           [
                {
                "SourceSystemID":"WebTag",
                "SourceCustomerNumber": "6952E515-B67C-CB1B-3B21-GRG9GBN0LN8DF",
                "Email": "[email protected]"
                }
           ]
       }

    

15. Click Save and click Send.

    

16. For successful requests, Postman displays Status: 200 OK and no response body. The payload is sent to CDP.

    

17. To verify that the test payload is displayed in CDP, contact Professional Services and provide the curl code snippet from your Postman test.

    To copy the curl code:

    1. Click Code.

       

    2. Click Copy Snippet.

       

       You can manually perform a test push using the website key, which is valid for 24 hours. The process continues until a daily automated server-side system is established to obtain the access key encrypted with Bcrypt.

Generating a Bcrypt access key through Node.js¶

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: