ヘッドレス 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 構造にリダイレクトするために、コードベースにいくつかの書き換えルールを追加する必要があります。
その他のリソース
- Getting started with Magento 2.x (CE and EE)
Learn how to integrate Klaviyo with your Magento 2 CE or EE store. You'll need to install the Klaviyo extension in Magento, configure the extension and set up OAuth, then enable the integration in Klaviyo. This guide covers all required integration steps, as well as how to confirm your historical data sync is successful.
- Magento integration system requirements reference
Learn about the system requirements for optimal syncing with Magento 1 or 2. The administrator of your Magento store is responsible for system specifications and configuration. Ensuring that your system is configured to work with Klaviyo will enable a smooth integration experience.
- Magento 2 data reference
Learn what data Klaviyo imports from your Magento 2 store when you integrate the two platforms. Klaviyo's integration with Magento 2 pulls in all of the historical data in your Magento 2 store with the initial historic sync. Once enabled the integration will also begin to sync order and customer data every 30 minutes. Examples of this data include the information associated with past placed orders, fulfilled orders, etc.