BigCommerce 用の「商品をカートに追加」イベントを作成する方法

このページで学べること

BigCommerce で、顧客がお客様のカートに商品を追加したときに追跡でき、カゴ落ちフローをトリガーできる カートに追加 イベントを作成する方法をご確認ください。BigCommerce との連携では、カートに追加 イベントは自動では追跡されません。まず、JavaScript スニペット（このガイドに含まれています）を BigCommerce のテーマファイルに追加（必要に応じて変更）する必要があります。

• カゴ落ちフローを送信するために Added to Cart イベントを作成する必要はありません。Added to Cart カゴ落ちフローは、Started Checkout によってトリガーされる標準のカゴ落ちフローとは別のものです。
• Klaviyo に組み込まれている BigCommerce 外部連携では、顧客がカートに商品を追加した後、チェックアウトプロセス中にメールアドレスを入力すると、Started Checkout イベントがすでに追跡されます。

始める前に

カートに追加イベントは、以前に Klaviyo によって cookie が設定されたユーザーに対してのみ追跡されます。

Added to Cart イベントが正しく機能するには、事前に Viewed Product のトラッキングをインストールしておく必要があります。通常、Klaviyo のお客様は BigCommerce の外部連携プロセス中にこれをインストールします。手順は 外部連携の記事で確認できます。

スニペットを追加

1. BigCommerce の管理画面を開き、[Storefront] > [My Themes] に移動します。
2. 現在のテーマを見つけ、[詳細設定] のドロップダウンをクリックしてください。
3. product.html ファイルを検索し、クリックして開きます。
4. 以下のスニペットを Klaviyo の Viewed Product スニペットの直下に直接貼り付けます。

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script text="text/javascript">
//Added to Cart
var klaviyo = window.klaviyo || [];
document.getElementById("form-action-addToCart").addEventListener('click',function (){
   klaviyo.track("Added to Cart", item);
});
</script>

1. 次に、スニペットを変更する必要があるかどうかを確認します。これを行うには、サイト上の「Add to Cart」ボタンの ID を確認し、それが以下のスニペットでハイライト表示されている「Add to Cart」変数（デフォルトは form-action-addToCart）と一致するかどうかを確認する必要があります。
   

2. ボタンの ID を確認するには、サイトの商品ページのいずれかを開き、[カートに追加] ボタンを右クリックして、[検証] を選択します。
   

3. コンソールが開き、[カートに追加] ボタンのソースコードが表示されます。次の画像は、コンソールで強調表示されている「Add to Cart」ボタンの ID を示しています。
   

4. ここに表示されているページ上のボタンの ID は form-action-addToCart と一致するため、変更は不要です。
   • サイト上の [カートに追加] ボタンの ID が form-action-addToCart ではない場合は、引用符内の変数テキストを変更して、ボタンの ID と一致させる必要があります。
5. ソースコードにボタン ID が表示されない場合は、次のセクションに進み、ボタン表記ではなくクラス表記を使用する代替スニペットの使い方をご覧ください。
6. 完了したら、product.html ファイルを保存します。

スニペットの追加が完了し、これで「カートに追加」のイベントをトラッキングします。

ボタン ID なしの [カートに追加] ボタンの代替スニペット

スタイル設定の都合上、一部のサイトでは、[カートに追加] ボタンにボタン ID ではなくクラス表記を使用しています。

「カートに追加」 ボタンにボタン ID（前のセクションの手順に従って確認できます）がなく、代わりに class 表記を使用している場合は、Added to Cart イベントを有効にするために、次の代替コードスニペットを使用してください。

1. ボタンが class 表記で定義されている場合は、次の代替スニペットを product.html ファイルの下部に貼り付けてください。

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script text="text/javascript">
//Viewed Product
var klaviyo = window.klaviyo || [];var classname = document.getElementsByClassName("add-to-cart");var addToCart = function() {   klaviyo.track("Added to Cart", item);}; for (var i = 0; i < classname.length; i++) {   classname[i].addEventListener('click', addToCart, false);}
</script>

1. このコードは、クラス名に合わせて変更する必要がある可能性があります。次の例で強調表示されている、引用符内のボタンのクラス名を、上記のコードスニペットで getElementsByClassName の後のかっこ内にある内容と比較してください。たとえば、スクリーンショットのクラス名は btn product-form_cart-submit btn--secondary-accent で、スニペット内のクラス名は add-to-cart です。
   
   

• この 2 つが一致しない場合は、ボタンのクラス名を反映するようにコードスニペットを変更してください。

2. たとえば、以下のコードスニペットは、classname の値 btn product-form_cart-submit btn--secondary-accent が二重引用符で囲まれるように変更されています。
   

3. product.html ファイルを保存します

保存すると、スニペットの追加が完了し、Added to Cart イベントを追跡できるようになります。

「カートに追加」スニペットのトラブルシューティング

スニペットを追加したら、「カートに追加」ボタンをモニタリングし、Cookie 付きの訪問者がこのボタンをクリックするたびに「カートに追加」イベントをトラッキングするようになるはずです。

このイベントは、Viewed Product イベントと同様に機能します。誰かがカートに追加する各アイテムは、新しいイベントをトリガーします。これらのイベントは、次の方法で表示できます。

1. Klaviyo で [アナリティクス] > [メトリック] に移動します。
2. イベントを検索しています
3. [アクティビティフィード] をクリックすると
   
   

アカウントに カートに追加 イベントが表示されない場合は、次をお試しください。

• Klaviyo.js（Active on Site スニペットとも呼ばれます）が動作していることを確認してください。これは、「Added to Cart」が正しく機能するために必要です。これは Klaviyo と外部連携した際にサイトへ自動的に追加されているはずですが、BigCommerce 外部連携の記事にあるオンサイト トラッキングのインストールを確認するセクションの手順に従って、動作していることを確認できます。
• Viewed Product トラッキングが機能していることを確認してください。これは、Added to Cart が正しく機能するためにも必要です。このスニペットは手動で追加します。追加とテストの方法については、外部連携の記事の Viewed Product セクションで確認できます。

カートに追加スニペットで引き続き問題が発生している場合は、「カートに追加」ボタンの識別に関する問題が原因である可能性があります。この場合は、Klaviyo サポートまでお問い合わせください。

「Added to Cart」のカゴ落ちフロー

カゴ落ちフロー（カートに追加 または チェックアウト開始 のいずれかを使用）を作成する際、メールに加えて Klaviyo SMS を活用できます。コンプライアンス上の理由から、フローでは SMS を 1 通のみ送信するようにしてください。また、複数の種類のカゴ落ちフローを使用している場合は、そのうち 1 つでのみ SMS を使用するようにしてください。

ライブラリの Essentials セクションには、標準のカゴ落ちリマインダーフローがあります。このフローは Started Checkout イベントによってトリガーされます。

カートに追加 イベントを使用してカゴ落ちフローを開始するには、適切なフローフィルターがすでに設定されている Klaviyo の フローライブラリ で利用できる事前構築済みフローの使用をおすすめします。このフローは、まだチェックアウトを開始していない、よりカジュアルな見込み購入者をターゲットにする傾向があります。

カートに追加イベントによってトリガーされるカゴ落ちフローは、「Prevent lost sales」ゴールセクションにあります。

BigCommerce の「カートに追加」のスニペットを実装している場合、このフローはすぐにでも利用可能です。推奨フィルターと動的メールコンテンツがすべて設定済みで、パーソナライズされたカート フォローアップ メールの送信に活用できます。

Amazon Buy with Prime を利用していますか？

ストア内の商品いずれかの決済とフルフィルメントに Buy with Prime を使用している場合は、次を行ってください。

• Klaviyo と Buy with Prime を統合することで、Buy with Prime のデータを Klaviyo アカウントに取り込めます。
• カゴ落ちフローに、以下のフローフィルターを追加して、Buy with Prime 経由でチェックアウトを開始した顧客や商品を購入した顧客を除外し、誤ったメッセージが届かないようにします。
  • このフローの開始以来 > 注文の確定（Buy with Prime）> 0回
  • このフローの開始以来 > 注文の確定（Buy with Prime）> 0回

その他のリソース