Product-related tags

From Genesys Documentation
Jump to: navigation, search
This topic is part of the manual Event tracking with tag managers for version Current of Genesys Predictive Engagement.

Review product-related tags that you can use in your organization.

Record a custom web event when a visitor enters a wrong promo code twice

Assumptions

  • Validation occurs on the backend.
  • When a visitor clicks a button with the ID `promo-code-submit-button`, the promo code submits for validation.
  • If the promo code is invalid, the frontend displays a message that has a class called `promo-code-error-message`.

Approach

  1. Check whether the promo code validation error message is present after the form submits.
  2. Wait 3 seconds after promo code submits to allow for backend validation of the promo code to complete and render on the frontend.
  3. If the validation code is not valid, increment a counter. If the validation code is valid, set the counter to 0.
  4. If the counter gets to 2, send the custom web event.

HTML before the visitor submits the form

<div>
    <form action="/promocode">
      <label for="promo-code">Promo Code:</label><br>
      <input type="text" id="promo-code" data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  name="promo-code"><br>
      <input type="submit" id="promo-code-submit-button" data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  value="Submit">
    </form>
  </div>

HTML after the visitor enters an invalid code

  <div>
    <form action="/promocode">
      <label for="promo-code">Promo Code:</label><br>
      <input type="text" id="promo-code" data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  data-origID="promo-code"  name="promo-code"><br>
      <input type="submit" id="promo-code-submit-button" data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  data-origID="promo-code-submit-button"  value="Submit">
    </form>

    <div class="promo-code-error-message">
      The submitted promo code is invalid
    </div>
  </div>

Tag

var promoErrorCounter = 0;

  document.querySelector('#promo-code-submit-button').on('click', function () {
    setTimeout(function () {
      if (document.querySelector('.promo-code-error-message').length) {
        promoErrorCounter += 1;

        if (promoErrorCounter === 2) {
          ac('record', 'promoError2x_triggered');
        }
      } else {
        promoErrorCounter = 0;
      }
    }, 3000);
  });

Record a custom web event when a visitor adds a product to their cart

Assumptions

This tag assumes that there is a common Add-to-cart class for the Add to cart button, and that the class and button are used consistently across the site.

Approach

When a visitor clicks a button that uses the common Add-to-cart class, Genesys Predictive Engagement records a custom web eventCode.

HTML

  <div>
    <button type="default" class="button add-to-cart" value="Add to cart">
  </div>

Tag

ac('dom', 'ready', function () {
    Array.prototype.forEach.call(document.querySelectorAll('.add-to-cart'), function (addToCartButton) {
      addToCartButton.on('click', function () {
        ac('record', 'product_added');
      });
    });
  });
Tip
"product_added" is an event name that gets a special icon in the customer journey map.

Track when a visitor has an attached product on the complete order page

To use this tag, replace the productURL and product values with your organization-specific attributes.

Tag

// check the content of the shopping cart when the checkout button is clicked
// load the following snippet on page load
$("button.checkoutKaButton").on("click", function () {
    $(".product-item-wrapper").find("a").each(function () {
        var productUrl = this.href;
        if (productUrl.indexOf("attachments") != -1 && productUrl.indexOf("product") != -1) {
            // send an event to Genesys Predictive Engagement
            ac('record', 'product_purchased');
        }
    });
});