Shopifyとの連携方法

ShopifyとVWOを連携すると、ShopifyストアでVWOテストを作成・実行できるようになります。

連携するためには、以下のステップがあります。

ウェブサイトのページにVWO SmartCodeを追加する
レベニュー・トラッキングの導入

ShopifyのウェブサイトにVWO SmartCodeを追加する際に考慮すべきこと

VWO SmartCodeをShopifyウェブサイトに追加すると、"Check Out "と "Thank you "ページを除くすべてのページに追加されます。
Shopifyで収集したサブスクリプションベースの収益をトラッキングしたい場合は、「サブスクリプションベースの収益のトラッキング」を参照してください。

ウェブサイトのページにVWO SmartCodeを追加

ウェブサイトにVWO SmartCodeを追加するには、次のように行います。

Tips:

WebページにSmartCodeが正しくインストールされているかどうかを確認するには、VWOアカウントの「Settings」>「SmartCode」セクションにあるSmartCode CheckerにURLを入力します。

手順

管理者アカウントでShopifyウェブストアにサインインしてください。
ナビゲーションバーから、Sales channels > Online Storeを選択してください。

「Themes」タブを選択し、「Actions」ドロップダウンから「Edit code」を選択します。

カスタマイズパネルのtheme.liquidファイルにアクセスし、VWO SmartCodeを追加します。VWO SmartCodeは、選択したテーマのすべてのページ（サイトワイド）に追加されます。チェックアウトプロセスがShopifyのドメインにある場合は、VWOのマルチドメイントラッキングを必ず有効にしてください。

Attention!!

Shopify Plusをご利用で、チェックアウトページの変更をトラッキングしたい場合は、checkout.liquidファイルにVWO SmartCodeを追加する必要があります。

「Save」で保存したら完了です。

収益のトラッキング方法

収益をトラッキングするためには、次のように行います。

手順

管理者アカウントでShopifyウェブストアにサインインしてください。
ナビゲーションバーから「設定」をクリックします。
設定ページで「Checkout」をクリックします。
[Additional Scripts］の欄にVWO SmartCodeを配置します。

VWO SmartCodeを追加したら、同じフィールド（Additional Scripts）のVWO SmartCodeの直後に、以下のJSコードスニペットを追加します。

window.VWO = window.VWO || [];

{% assign _vis_opt_revenue = total_price | money_without_currency %}

window._vis_opt_queue = window._vis_opt_queue || [];

window._vis_opt_queue.push(function() {_vis_opt_revenue_conversion('{{ _vis_opt_revenue }}'.replace(',', ''));});

window.VWO.push(['track.revenueConversion','{{ _vis_opt_revenue }}'.replace(',', '')]);

</script>

「Save」をクリックします。

独立した収益トラッキングゴールの作成

VWOで独立した収益トラッキングゴールを作成するには、次のように実行します。

手順

VWOにログインし、「INSIGHTS」＞「Goal」と進みます。
ダッシュボードの右上にある「Create」をクリックします。
ゴールタイプは「Track Revenue」を選択します。
取引が成功したことが記録されるページのURLを入力します。通常、収益の値は「thankyou」ページで確認できます。

複数のページの収益をトラッキングするには、Advancedオプションをクリックして、ページの複数指定や除外、URLパターンの定義、および正規表現を行います。
特定のビジターグループからの収益収集をトラッキングする場合は、セグメントオプションを選択します。セグメンテーションについては、ユーザーセグメント設定を参照してください。
[次へ]をクリックして、ページのオーディエンスを定義します。デフォルトでは、このページに到達したすべてのユニークビジターがゴールの対象になります。[Advanced］オプションを使用すると、ワイルドカードエントリを含む広範なURLまたは特定のURLを含む高度なパターンマッチオプションを定義できます。

特定のテストに収益ゴールを追加

特定のテストに収益ゴールを追加するには、次のように行います。

Attention!!

サンクスページがShopifyのドメインにある場合は、キャンペーンが複数のドメインで動作するようにする必要があります。しかし、複数ドメインを跨ぐキャンペーン（クロスドメイントラッキング）はITPの規制範囲となるため、ChromeとSafariのブラウザを利用しているユーザーはテスト対象外となりますのでご注意ください。

【FAQ】SafariのITPへの対応について知りたい

手順

VWOを使用して、A/Bテスト・多変量テスト・スプリットURLテスト等の各テストを作成します。
テストのゴール設定ページで、ゴールタイプとして「Track Revenue on」を選択し、URLにShopifyのコンバージョンページ（サンクスページ）を入力します。例えば、*checkout.shopify.com*XXXXXX*（XXXXXXはストアの番号）のように入力します。

サブスクリプションベースの収益のトラッキング

ReChargeアプリのプラグインを使用してShopifyで収集したサブスクリプションベースの収益を追跡するには、次のように実行します。

Attention!!

スタンダードプランの場合、ReChargeアプリはあなたのドメインではなく、独自のチェックアウトドメインを使用します。そのため、ReChargeのスタンダードプランをご利用で、チェックアウトページで収益をトラッキングしたい場合は、VWOのキャンペーン設定でクロスドメイントラッキングを有効にする必要があります。（ITPの規制範囲になります）

手順

Shopifyパネルで、ReChargeアプリを開きます。

メニューを開くには、ページの右上にあるスパナのアイコンをクリックします。
メニューの中から「Checkout」を選択します。

サンクスページにVWO SmartCodeと収益コードスニペットを追加。

次の収益コードスニペットを使用してください。

window.VWO = window.VWO || [];

window.VWO.push(['track.revenueConversion',window.cart_json.total_price]);

window._vis_opt_queue = window._vis_opt_queue || [];

window._vis_opt_queue.push(function() {_vis_opt_revenue_conversion(window.cart_json.total_price);});

</script>