Product-related tags

From Genesys Documentation
Jump to: navigation, search
This topic is part of the manual Event tracking for version Current of Altocloud.

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

Record a custom web event if a customer enters a wrong promo code twice

Assumptions

  • Validation is done on the backend.
  • The promo code is submitted for validation by clicking a button with the Id `promo-code-submit-button`.
  • If the promo code is invalid, the frontend displays a message that has a class called `promo-code-error-message`.

Approach

  1. Check if the promo code validation error message is present after the form is submitted.
  2. Wait for 3 seconds after promo code is submitted to allow for backend validation of the promo code to be completed and rendered 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 user 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"  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"  value="Submit">
    </form>
  </div>

HTML after the user 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"  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"  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 if a customer 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 user clicks a button that uses the common Add-to-cart class, Altocloud 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 customer 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 Altocloud
            ac('record', 'product_purchased');
        }
    });
});