ヘッドレス Magento 2 セットアップを外部連携する方法
このページで学べること
headless Magento 2 のセットアップで Klaviyo を統合する方法をご確認ください。Magento 2 を E コマースストアのバックエンドに使用し、フロントエンドには別のフレームワーク(React.js など)を使用している場合は、Angular など)を使用している場合は、以下の情報が参考になります。
この外部連携には 3 つのステップが必要です:
- Klaviyo のネイティブ外部連携を介して Magento 2 ストアを接続し、注文、カタログ、購読者データを同期します。
- サイトにコードスニペットを手動で追加して、オンサイト トラッキング機能を有効にします。
- (商品カタログにカスタム URL 構造を使用している場合) 商品 URL のリライトルールを追加してください。
Klaviyo のネイティブ外部連携を接続する
まず、Klaviyo のネイティブ外部連携を介して Magento 2 ストアを接続し、Magento 2 のスタートガイドの手順に従って、注文、カタログ、購読者データを同期します。
Klaviyo の Magento 2 外部連携の大部分は、Magento のサーバー側 API を介したデータ取得に依存しています。通常、分離されたフロントエンドを使用しても影響はなく、ネイティブ外部連携では追加の設定なしで次のイベントがトラッキングされます。
- 注文の確定
- 注文発送済み
- 出荷完了
- 注文キャンセル
- 返金済の注文
- チェックアウトの開始
さらに、以下の点にも注意してください:
- ユーザーがチェックアウトする際に見積もりを引き続き作成し、メールアドレスを割り当てている場合は、「Started Checkout」イベントが同期されます。
- Magento 2 のニュースレター テーブルに購読している顧客の同期を有効にしている場合、同期は想定どおりに動作するはずです。
コードスニペットを手動で追加する
ヘッドレス構成を使用している場合は、Klaviyo の「サイト上でアクティブ」JavaScript(Klaviyo.js とも呼ばれます)をサイトに手動で追加する必要があります。Klaviyo.js はユーザーがサイトでアクティブなときを追跡し、Klaviyo フォームを有効にします。
また、次の操作を行えるスニペットも提供しています。
- 商品閲覧のトラッキング
ユーザーがサイトで特定の商品を閲覧したタイミングをトラッキングします(閲覧放棄フローで活用できます)。 - 最近閲覧した項目のトラッキング
ユーザーのプロファイルで、最近閲覧した項目をトラッキングします。 - カートに追加のトラッキング
ユーザーが商品をカートに追加したタイミングをトラッキングします。 - ログイン済みユーザーのトラッキング
アカウント作成機能がある場合、ユーザーがログインしたタイミングをトラッキングします。
サイトの訪問
ウェブサイトのすべてのページに表示されるように、以下の Klaviyo.js スニペットを追加してください。これにより、アクティブなサイト上トラッキングと Klaviyo フォームが有効になります。PUBLIC_API_KEY をKlaviyo の公開 API キーに置き換えてください。
<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>Klaviyo.js を追加した後、次のスニペット( Viewed Product 、 Added to Cart など)のいずれかを追加したいページでは、 Klaviyo オブジェクト を読み込む必要があります。klaviyo オブジェクトは、ページごとに 1 回だけ読み込めば十分です。
klaviyo オブジェクトを読み込むには、必要なページに次のスニペットを手動でインストールします:
<script type="text/javascript"> !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>商品の閲覧
閲覧放棄フローを設定する場合や、商品閲覧アクティビティに基づいてセグメントを作成する場合は、Viewed Product メトリックの JavaScript イベントトラッキングを追加する必要があります。すべての Viewed Product メトリックは、ユーザー プロファイルに紐付けられています。商品ページ テンプレートに、次のスニペットを追加してください。
<script type="text/javascript">
var klaviyo = window.klaviyo || [];
var item = {
"ProductName": item.ProductName,
"ProductID": item.ProductID,
"SKU": item.SKU,
"Categories": item.Categories,
"ImageURL": item.ImageURL,
"URL": item.URL,
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
};
klaviyo.track("Viewed Product", item);
</script>スニペット内の JSON プロパティの値を更新し、そのプロパティに必要な関連情報から動的に取得されるようにしてください。
最近閲覧した商品
さらに、ユーザーのプロファイルにあるビジュアルな「Recently Viewed Items」フィードにエントリを追加できる別のスニペットもあります。次のスニペットは、Viewed Productスニペットの直下に直接追加できます。
スニペット内の item.___ は、プラットフォームで商品プロパティに使用している item オブジェクトに置き換えてください。
<script type="text/javascript">
var klaviyo = window.klaviyo || [];
klaviyo.trackViewedItem({
"Title": item.ProductName,
"ItemId": item.ProductID,
"Categories": item.Categories,
"ImageUrl": item.ImageURL,
"Url": item.URL,
"Metadata": {
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
}
});
</script>商品をカートに追加
カゴ落ちメールを、カートに商品を追加したもののチェックアウト ページまで到達しなかった訪問者に送信したい場合は、「カートに追加」メトリックをトラッキングする必要があります。このイベントをトラッキングするには、顧客を識別(つまり cookie を付与)する必要があります。次は、カートにすでに 1 つの商品(Winnie the Pooh)が入っていて、別の商品(A Tale of Two Cities)がカートに追加されたばかりの場合のリクエスト例です:
<script type="text/javascript">
klaviyo.track("Added to Cart", {
"$value": 29.98,
"AddedItemProductName": "A Tale of Two Cities",
"AddedItemProductID": "1112",
"AddedItemSKU": "TALEOFTWO",
"AddedItemCategories": ["Fiction", "Classics", "Children"],
"AddedItemImageURL": "http://www.example.com/path/to/product/image2.png",
"AddedItemURL": "http://www.example.com/path/to/product2",
"AddedItemPrice": 19.99,
"AddedItemQuantity": 1,
"ItemNames": ["Winnie the Pooh", "A Tale of Two Cities"],
"CheckoutURL": "http://www.example.com/path/to/checkout",
"Items": [{
"ProductID": "1111",
"SKU": "WINNIEPOOH",
"ProductName": "Winnie the Pooh",
"Quantity": 1,
"ItemPrice": 9.99,
"RowTotal": 9.99,
"ProductURL": "http://www.example.com/path/to/product",
"ImageURL": "http://www.example.com/path/to/product/image.png",
"ProductCategories": ["Fiction", "Children"]
},
{
"ProductID": "1112",
"SKU": "TALEOFTWO",
"ProductName": "A Tale of Two Cities",
"Quantity": 1,
"ItemPrice": 19.99,
"RowTotal": 19.99,
"ProductURL": "http://www.example.com/path/to/product2",
"ImageURL": "http://www.example.com/path/to/product/image2.png",
"ProductCategories": ["Fiction", "Classics"]
}
]
});
</script>ログインしたユーザー
顧客がウェブサイトでアカウントを作成できる場合は、ログイン済みユーザーを識別してトラッキングするために追加のコードを加えることをおすすめします。このコードは、ユーザーがログインした後に 1 回だけ実行する必要があります。
開始するためのスクリプト例を次に示します。
klaviyo.identify({
"$email" : customer.email,
"$first_name" : customer.first_name,
"$last_name" : customer.last_name
});商品 URL の書き換えルールを追加します
Magento 2 の商品カタログは、ネイティブ外部連携を通じて通常どおり Klaviyo と同期されるはずですが、カスタム URL 構造を使用している場合は、コードベースにいくつかのリライトルールを追加する必要があります。
デフォルトの Magento 2 商品 URL は、次の構造に従います。
https://[YOUR STORE]/catalog/product/view/id/[PRODUCT ID]ストアで次のような URL 構造を使用している場合:
https://[YOUR STORE]/products/[Product Name]次に、標準の Magento 2 商品リンクをカスタム URL 構造にリダイレクトするために、コードベースにいくつかの書き換えルールを追加する必要があります。
その他のリソース
- Magento 2.x(CE および EE)スタートガイド
Klaviyo を Magento 2 CE または EE のストアと連携する方法をご覧ください。Magento に Klaviyo 拡張機能をインストールし、拡張機能を設定して OAuth をセットアップしてから、Klaviyo で外部連携を有効にする必要があります。このガイドでは、必要な外部連携手順のすべてに加え、履歴データの同期が成功したことを確認する方法について説明します。
- Magento 外部連携システム要件リファレンス
Magento 1 または 2 と最適に同期するためのシステム要件をご確認ください。Magento ストアの管理者は、システム仕様と構成に責任を負います。Klaviyo で動作するようにシステムが設定されていることを確認すると、スムーズな外部連携体験が可能になります。
- Magento 2 データ リファレンス
2 つのプラットフォームを外部連携する際に、Klaviyo が Magento 2 ストアからどのようなデータをインポートするかをご確認ください。Klaviyo の Magento 2 との外部連携では、初回の履歴同期で Magento 2 ストア内のすべての履歴データを取得します。外部連携を有効にすると、注文データと顧客データが 30 分ごとに同期されるようになります。このデータの例として、過去に行われた注文、フルフィルメント済みの注文などに関連する情報があります。