訪問者が間違ったプロモコードを2回入力したときに、カスタムWebイベントを記録する

前提条件

  • バリデーションはバックエンドで行われます。
  • 訪問者がID `promo-code-submit-button` のボタンをクリックすると、プロモコードは検証のために送信されます。
  • プロモコードが無効な場合、フロントエンドは `promo-code-error-message` という名前のクラスを持つメッセージを表示します。

アプローチ

  1. フォーム送信後にプロモコードの検証エラーメッセージが表示されるかどうかを確認します。
  2. プロモコードを送信してから3秒待つと、バックエンドでのプロモコードの検証が完了し、フロントエンドにレンダリングされます。
  3. バリデーションコードが有効でない場合、カウンタをインクリメントする。 バリデーションコードが有効な場合、カウンタに0をセットする。
  4. カウンタが2になったら、カスタムWebイベントを送信します。

訪問者がフォームを送信する前のHTML

<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

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

ウェブチャットのお客様向けタグ

次のタグは、ウェブチャット をご利用のお客様にのみ適用されます。 Webメッセージング をご利用のGenesys Cloud CXのお客様は、Webメッセージングのお客様用のタグをご利用ください。
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);  });

ウェブメッセージをご利用のお客様向けタグ

次のタグは、Webメッセージング をご利用のGenesys Cloud CXのお客様のみに適用されます。 ウェブチャット を使用している場合、ウェブチャット顧客用のタグを使用します。
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);  });

訪問者が商品をカートに入れたときに、カスタムウェブイベントを記録する

前提条件

このタグは、Add to cart ボタンに共通の Add-to-cart クラスが存在し、そのクラスとボタンがサイト全体で一貫して使用されていることを前提としています。

アプローチ

訪問者が一般的なAdd-to-cartクラスを使用するボタンをクリックすると、Genesys Predictive EngagementはカスタムWeb eventCodeを記録します。

HTML

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

ウェブチャットのお客様向けタグ

次のタグは、ウェブチャット をご利用のお客様にのみ適用されます。 Webメッセージング をご利用のGenesys Cloud CXのお客様は、Webメッセージングのお客様用のタグをご利用ください。
ac('dom', 'ready', function () {    Array.prototype.forEach.call(document.querySelectorAll('.add-to-cart'), function (addToCartButton) {      addToCartButton.on('click', function () {        ac('record', 'product_added');      });    });  });
ヒント:
"product_added" はイベント名で、カスタマージャーニーマップ に特別なアイコンが表示されます。

ウェブメッセージをご利用のお客様向けタグ

次のタグは、Webメッセージング をご利用のGenesys Cloud CXのお客様のみに適用されます。 ウェブチャット を使用している場合、ウェブチャット顧客用のタグを使用します。
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"});      });    });  });
ヒント:
"product_added" はイベント名で、カスタマージャーニーマップ に特別なアイコンが表示されます。

注文完了ページで、訪問者が付属の商品を持っている場合の追跡

このタグを使用するには、productURL およびproduct の値を、組織固有の属性に置き換えます。

ウェブチャットのお客様向けタグ

次のタグは、Genesys Cloud CX のお客様がWeb チャット を使用する場合にのみ適用されます。 Webメッセージング を使用している場合は、Webメッセージングのお客様用のタグを使用します。
// 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');        }    });});

ウェブメッセージをご利用のお客様向けタグ

次のタグは、Webメッセージング を使用しているGenesys Cloud CXのお客様のみに適用されます。 ウェブチャット を使用している場合、ウェブチャット顧客用のタグを使用します。
// 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"});        }    });});