This page provides instructions to configure WebTag Legacy using Google Tag Manager (GTM).

Use the following checklist to configure WebTag:

Configuring the Acquia Global tag (WebTag Legacy)¶

CDP uses an encrypted layer with a bcrypt salted key. You must refresh this key daily to access and push payloads to the CDP API. Also, you must add the encrypted layer to the global tag so that it can auto-create the bcrypt key before getting fired daily, each time a customer engages on a webpage where GTM is added.

1. In the GTM user interface, click Tags > New.
2. Name the tag as CDP - Global.
3. Click Tag Configuration.
4. In Choose tag type, click Custom HTML.

5. In HTML, create the Acquia encrypted layer script:

   copy

   <script>
       var hashes = {"date": "bcrypt", "date"}
   
       var today = new Date().toISOstring().slice(0,10);
   
       var $A1Config = {
                                   key: hashes [today],
                                   tenantId: ADD ID, host: "Acquia API URL"
                                  };
   </script>
   <script>src="https://scripts.agilone.com/latest/a1.js"</script>
   

6. In Advanced Settings:
   1. Set Tag firing priority to 20.
   2. Set Tag firing options to Once per page.
7. In Tag Sequencing:
   1. Select the Fire a tag before CDP - Global fires checkbox.
   2. In Setup Tag, select CDP - Customer Object so that the tag fires right before the CDP - Customer Object tag.
8. Click Triggering and set the triggering process to fire the tag at All Pages as Page View.
9. Click Save.

Configuring the Acquia Customer Object tag¶

1. In the GTM user interface, click Tags > New.
2. Name the tag as CDP - Customer Object.
3. Click Tag Configuration.
4. In Choose tag type, click Custom HTML.

5. In HTML, create the Acquia Customer Object script:

   copy

   <script>
       var visitor = {"id" : "{{GA - ClientID}}"};
   
       If ("{{GA - Data Layer - User Email}}" != "unknown")
       {
       visitor.email = "{{GA - Data Layer - User Email}}";
       }
   
      var $a1vis = $A1.Customer(visitor);
   </script>
   

6. In Advanced Settings:
   1. Set Tag firing priority to 10.
   2. Set Tag firing options to Once per page.
7. In Tag Sequencing:
   1. Select the Fire a tag before CDP - Global fires checkbox.
   2. In Setup Tag, select the following tags so that the tag fires right before these tags:
      • CDP - Login
      • CDP - Logout
      • CDP - PDP
      • CDP - PDP - Add to Cart
      • CDP - PLP
      • CDP - PLP - Add to Cart
      • CDP - Search
      • CDP - Checkout
8. Click Triggering and set the triggering process to fire the tag at All Page Views - Window Loaded as Window Loaded.
9. Click Save.

Configuring optional tags and variables¶

Configuring CDP - Login¶

1. In the GTM user interface, click Tags > New.
2. Name the tag as CDP - Login.
3. Click Tag Configuration.
4. In Choose tag type, click Custom HTML.

5. In HTML, create the Login script:

   copy

   <script>
      var $a1event = {type: "Login", customer: $a1vis};
   
      $A1.Event($a1event).send();
   </script>
   

6. In Advanced Settings, set Tag firing priority to 10.
7. Click Triggering and set the triggering process to fire the tag at User Logged In - Window Loaded as Window Loaded.
8. Click Save.

Configuring CDP - Logout

1. In the GTM user interface, click Tags > New.
2. Name the tag as CDP - Login.
3. Click Tag Configuration.
4. In Choose tag type, click Custom HTML.

5. In HTML, create the Logout script:

   copy

   <script>
      var $a1event = {type: "Logout", customer: $a1vis};
      $A1.Event($a1event).send();
   </script>

6. In Advanced Settings, set Tag firing priority to 10.
7. Click Triggering and set the triggering process to fire the tag at User Logged In - Window Loaded as Window Loaded.
8. Click Save.

Configuring CDP - PDP¶

1. In the GTM user interface, click Tags > New.
2. Name the tag as CDP - PDP.
3. Click Tag Configuration.
4. In Choose tag type, click Custom HTML.

5. In HTML, create the PDP script:

   copy

   <script>
      var $a1prod = {productId: "{{PDP - Product SKU - JS}}"};
      var $a1event = {type: "productBrowsed", customer: $a1vis, targets: $a1prod};
   
      $A1.Event($a1event).send();
   </script>
   

6. Click Triggering and set the triggering process to fire the tag at PDP - Window Loaded as Window Loaded.
7. Click Save.

Configuring CDP - PDP - Add to Cart¶

1. In the GTM user interface, click Tags > New.
2. Name the tag as CDP - PDP - Add to Cart.
3. Click Tag Configuration.
4. In Choose tag type, click Custom HTML.

5. In HTML, create the PDP - Add to Cart script:

   copy

   <script>
      var $a1prod = {productId: "{{PDP - Product SKU - JS}}"};
      var $a1event = $a1event({type: "cartUpdated", customer: $a1vis, targets: $a1prod});
   
      $a1event.send();
   </script>
   

6. Click Triggering and set the triggering process to fire the tag at PDP - Add to Cart as All Elements.
7. Click Save.

Configuring CDP - PLP¶

1. In the GTM user interface, click Tags > New.
2. Name the tag as CDP - PLP.
3. Click Tag Configuration.
4. In Choose tag type, click Custom HTML.

5. In HTML, create the PLP script:

   copy

   <script>
       var $a1cat = {SourceProductCategoryNumber: "{{Page Path}}"};
       var $a1event = {type: "categoryBrowsed", customer: $a1vis, targets: $a1cat};
   
       $A1.Event($a1event).send();
   </script>
   

6. Click Triggering and set the triggering process to fire the tag at View Category - Window Loaded as Window Loaded.
7. Click Save.

Configuring CDP - PLP - Add to Cart¶

1. In the GTM user interface, click Tags > New.
2. Name the tag as CDP - PLP - Add to Cart.
3. Click Tag Configuration.
4. In Choose tag type, click Custom HTML.

5. In HTML, create the PLP - Add to Cart script:

   copy

   <script>
      var $a1prod = {productID: "{{PLP - Quick Shop Opened - Product SKU - JS}}"};
      var $a1event = {type: "cartUpdated", customer: $a1vis, targets: $a1prod};
   
      $A1.Event($a1event).send();
   </script>
   

6. Click Triggering and set the triggering process to fire the tag at PLP - Quickshop - Add To Cart as All Elements.
7. Click Save.

Configuring CDP - Search¶

1. In the GTM user interface, click Tags > New.
2. Name the tag as CDP - Search.
3. Click Tag Configuration.
4. In Choose tag type, click Custom HTML.

5. In HTML, create the CDP - Search script.

   copy

   <script>
       var $a1search = {terms: "{{Site Search Term}}"};
       var $a1event = {type: "onsiteSearch", customer: "Login", customer: $a1vis, targets: $a1search};
   
       $A1.Event($a1event).send();
   </script>
   

6. Click Triggering and set the triggering process to fire the tag at Search Page - Window Loaded as Window Loaded.
7. Click Save.

Configuring CDP - Checkout¶

1. In the GTM user interface, click Tags > New.
2. Name the tag as CDP - Checkout.
3. Click Tag Configuration.
4. In Choose tag type, click Custom HTML.

5. In HTML, create the CDP - Checkout script.

   copy

   <script>
   (function(){
    var _ix = { };
     _ix.order = dataLayer[0];
     _ix.orderId = _ix.order.transactionId;
     _ix.total = _ix.order.transactionSubtotal;
     _ix.price = [ ];
     _ix.skus = [ ];
     _ix.quantity = [ ];
     _ix.items = [ ];
      for(var x in _ix.order.transactionProducts){
       _ix.items.push({
        id: _ix.orderId + "-" + (x + 1),
        type: "Purchase",
        subType: "pending",
        productId: _ix.order.transactionProducts [x].sku,
        quantity _ix.order.transactionProducts[x].quantity,
        saleRevenue: _ix.order.transactionProducts[x]. Price *
     _ix.order.transactionProducts[x] . quantity,
        discount: 0
       });
   
    }
    var $tx = {id: _ix.orderId, type: "Purchase"};
   
    var $a1event = {
        type: "checkout",
        customer: $a1vis,
        transaction: $tx,
        targets: _ix.items};
   
     // $A1.Event($a1event).send();
    })()
   </script>
   

6. Click Triggering and set the triggering process to fire the tag at Checkout - Confirmation Page as Dom Ready.
7. Click Save.

Configuring WebTag Legacy using Google Tag Manager