Product-related tags

AI-generated summary

Genesys Cloud provides web chat, messaging, and call routing capabilities for personalized customer engagements, including configurable chat widgets, integrated messaging channels, and predictive routing to connect customers with appropriate agents. The platform enables customer journey tracking and recording of custom web events such as product views, additions, and purchases to construct detailed journey maps of key interactions. The platform includes form handling capabilities to validate promo codes and enable self-service redemption across web chat and messaging channels. Validation logic tracks submission attempts through a counter mechanism that resets when valid codes are entered and triggers a custom web event upon reaching a counter value of 2. When visitors submit invalid codes, the form displays an error message stating "The submitted promo code is invalid" within a designated error message container, with error tracking implemented through counter incrementation when validation messages are detected. Genesys Cloud CX provides implementation guidance for tracking customer interactions through web messaging and web chat channels using custom event recording. The platform supports distinct tagging approaches for web messaging and web chat customers, with separate code implementations for each channel type. Key tracking capabilities include recording promotional code errors when users encounter validation failures on a second attempt, capturing add-to-cart actions through button class selectors that trigger custom "product_added" events, and monitoring product purchases on checkout pages by detecting attached products in shopping carts. Implementation requires identifying consistent HTML elements such as button classes and product URL patterns specific to each organization's website structure. Genesys Cloud integrates with e-commerce checkout processes through event tracking functionality that monitors shopping cart activity using JavaScript to detect checkout button clicks and scan product items within the cart wrapper. When qualifying products are identified, the system triggers a "product_purchased" event via Genesys Predictive Engagement using the Journey.record command, enabling customer journey monitoring and engagement personalization based on purchase behavior. The platform is deprecating Genesys Predictive Engagement (GPE) Tracking SDK v1 and ACD Web Chat v2, with customers encouraged to migrate to digital user tracking via Messenger and Web Messaging respectively. The documentation includes a feedback mechanism allowing users to report content accuracy, clarity, and relevance, with role-based categorization for agent, administrator, developer, partner, supervisor, and support personnel.

Feature deprecations:

Genesys will no longer support Genesys Predictive Engagement (GPE) Tracking SDK v1, which is available to customers via the legacy tracking snippet under Predictive Engagement. All customers are encouraged to migrate to digital user tracking via Messenger. For more information, see .

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

Check whether the promo code validation error message is present after the form submits.
Wait 3 seconds after promo code submits to allow for backend validation of the promo code to complete and render on the frontend.
If the validation code is not valid, increment a counter. If the validation code is valid, set the counter to 0.
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 . If you are a Genesys Cloud CX customer using , 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 . If you are using , 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 . If you are a Genesys Cloud CX customer using , 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 .

Tag for web messaging customers

The following tag only applies to Genesys Cloud CX customers using . If you are using , 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 .

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 . If you are using , 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 . If you are using , 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"});        }    });});

[NEXT] Was this article helpful?

Get user feedback about articles.

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

Check whether the promo code validation error message is present after the form submits.
Wait 3 seconds after promo code submits to allow for backend validation of the promo code to complete and render on the frontend.
If the validation code is not valid, increment a counter. If the validation code is valid, set the counter to 0.
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 . If you are a Genesys Cloud CX customer using , 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 . If you are using , 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 . If you are a Genesys Cloud CX customer using , 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 .

Tag for web messaging customers

The following tag only applies to Genesys Cloud CX customers using . If you are using , 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 .

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 . If you are using , 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 . If you are using , 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"});        }    });});

Product-related tags

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

Assumptions

Approach

HTML before the visitor submits the form

HTML after the visitor enters an invalid code

Tag for web chat customers

Tag for web messaging customers

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

Assumptions

Approach

HTML

Tag for web chat customers

Tag for web messaging customers

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

Tag for web chat customers

Tag for web messaging customers

[NEXT] Was this article helpful?

Loading...

Product-related tags

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

Assumptions

Approach

HTML before the visitor submits the form

HTML after the visitor enters an invalid code

Tag for web chat customers

Tag for web messaging customers

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

Assumptions

Approach

HTML

Tag for web chat customers

Tag for web messaging customers

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

Tag for web chat customers

Tag for web messaging customers

[NEXT] Was this article helpful?