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)

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

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

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

• 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.

• Click Save.

Configuring the Acquia Customer Object tag

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

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

• In Advanced Settings > Tag Sequencing, do the following:
  • Check the Fire a tag before CDP - Customer Object fires checkbox.
  • In Setup Tag, select CDP - Global.
• Click Triggering and set the triggering process to fire the tag at All Page - Page View.
• Click Save.

Configuring optional tags and variables

Configuring CDP - Login

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

• In HTML, create the Login script:

  copy

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

• In Advanced Settings > Tag Sequencing, do the following:
  • Check the Fire a tag before CDP - login fires checkbox.
  • In Setup Tag, select CDP - Customer Object.
• 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.
• 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>