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

Use the following checklist to configure WebTag:

Configuring the Acquia Global tag (WebTag 2.0)

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 Global tag script:

   copy

   <script>
     var $A1Config = {
       webtagId: "your-webtag-id", // Paste your webtagId value provided by Acquia.
       tenantId: 999, // Example set the static tenant ID.
       host: "//url.endpoint.com" // Set the service endpoint URL according to your hosted environment and cloud region. 
     };
   </script>
   <script src="https://scripts.agilone.com/latest/acquia-cdp-webtag.js"></script>

6. In Advanced Settings, set Tag firing options to Once per page.

7. Click Triggering and set the triggering process to fire the tag at Initialization - All Pages. 

   If you are using Google Tag Manager consent mode support, you must select the Consent Initialization - All Pages option.

8. 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 > Tag Sequencing, do the following:
   1. Check the Fire a tag before CDP - Customer Object fires checkbox.
   2. In Setup Tag, select CDP - Global.
7. Click Triggering and set the triggering process to fire the tag at All Page - Page View.
8. 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 > Tag Sequencing, do the following:
   1. Check the Fire a tag before CDP - login fires checkbox.
   2. In Setup Tag, select CDP - Customer Object.
7. Click Triggering and set the triggering process to fire the tag at User Logged In - Window Loaded as Window Loaded or any other trigger applicable.
8. Click Save.

Configuring CDP - Logout

Refer to the CDP - Login example and replace the HTML script with the following:

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

Configuring CDP - Products Browsed - (PDP - Product Details Page)

Refer to the CDP - Login example and replace the HTML script with the following:

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

Configuring CDP - Cart Updated - Product Details Page (PDP) or Product List Page (PLP) for Add to Cart

Refer to the CDP - Login example and replace the HTML script with the following:

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

Configuring CDP - Category Browsed - (PLP - Product List Page)

Refer to the CDP - Login example and replace the HTML script with the following:

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

Configuring CDP - Search

Refer to the CDP - Login example and replace the HTML script with the following:

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

Configuring CDP - Checkout

Refer to the CDP - Login example and replace the HTML script with the following:

<script>
  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>

Configuring WebTag 2.0 using Google Tag Manager

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

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

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

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

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

<script>
  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>