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"  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"  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"  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"  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"  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"  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"  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"  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 for web chat customers

The following tag only applies to customers using web chat. If you are a Genesys Cloud CX customer using web messaging, use the tag for web messaging customers.
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);  });

Tag for web messaging customers

The following tag only applies to Genesys Cloud CX customer using web messaging. If you are using web chat, use the tag for web chat customers.
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) {          Genesys("command", "Journey.record", { eventName: "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 for web chat customers

The following tag only applies to customers using web chat. If you are a Genesys Cloud CX customer using web messaging, use the tag for web messaging customers.
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.

Tag for web messaging customers

The following tag only applies to Genesys Cloud CX customers using web messaging. If you are using web chat, use the tag for web chat customers.
Genesys("subscribe", "Journey.ready", function(){    Array.prototype.forEach.call(document.querySelectorAll('.add-to-cart'), function (addToCartButton) {      addToCartButton.on('click', function () {        Genesys("command", "Journey.record", { eventName: "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 for web chat customers

The following tag only applies to Genesys Cloud CX customers using web chat. If you are using web messaging, use the tag for web messaging customers.
// 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');        }    });});

Tag for web messaging customers

The following tag only applies to Genesys Cloud CX customers using web messaging. If you are using web chat, use the tag for web chat customers.
// 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            Genesys("command", "Journey.record", { eventName: "product_purchased"});        }    });});