Shopify で構築されたECサイトにKARTEのタグを設置する際の参考手順を紹介します。

注意点

Shopifyのコード編集の方法などのお問い合わせはサポートの対象外となっております
サポートが必要な場合は Shopify エキスパート一覧より専門家にお問い合わせいただくか、Shopifyの日本コミュニティをご利用ください。
Shopifyの youtube チャンネルにいくつか動画コンテンツもあるようです。
Shopifyの契約プランやカスタマイズ状況に応じて、タグが意図通りに動作しない可能性があります
KARTEに連携したいデータに過不足がある場合は、このページで紹介しているタグのサンプルを書き換えてから設置してください
チェックアウト（注文状況）ページでは Shopify Plus を利用しない場合と利用している場合で設定方法が異なります

Shopifyへのタグ設置方法

チェックアウト（注文状況）以外のページ

管理画面のサイドバーからオンラインストアを選択して、テーマの中にある「アクション」を選択します

プルダウンで表示された項目の中から「コードを編集する」を選択します

「コード編集画面」で編集したいliquidファイル（HTMLを生成するためのテンプレート）を選択します

liquidファイルを編集し、タグを設置します
対応するページが開かれたときにタグを発火させることができます。

参考: shopify > テーマコードの編集

myshopify.comはPublicSuffixリストに登録されております。PublicSuffixリストに登録されているプライマリドメインを持つサイトにKARTE計測タグを設置する場合は計測タグに特別なオプションを指定する必要があります。後述の「設置例」に具体的なタグの内容を含め、オプションの記載方法を詳説しておりますのでご参照ください。

チェックアウト（注文状況）ページ
チェックアウト（注文状況）ページでは以下のように「設定画面」からスクリプトを編集し、タグを設定する事が可能です。
ただし、Shopify Plus を利用している場合に限って「コード編集画面」からcheckout.liquidを編集してタグを設置することが可能です。
「コード編集画面」で設定したい場合は前述の「チェックアウト（注文状況）以外のページ」をご参照ください。

参考: Shopify > 注文管理 > 注文状況ページ

管理画面のサイドバーから「設定」を選択します

設定画面のサイドバーから「チェックアウト」を選択します

チェックアウト画面にて「注文処理 > 追加スクリプト」にタグを登録します
チェックアウトの注文状況ページ（/thank_you）でタグを発火することが出来ます。

具体的なタグの内容については後述する「設置例」をご参照ください。

設置例

計測タグの設置例
計測タグの概要については計測タグの設置方法をご参照ください。

手順
- KARTEの管理画面から「標準」の計測タグをコピーします
- 下記の2箇所に、コピーした計測タグを設置し、保存します
  - theme.liquidの</head>の直前
  - チェックアウト時の「追加スクリプト」の冒頭
- 設置したタグの中でtracker.initという文字列を探します。
- tracker.init('API_KEY', {domain: 'shopifyサイトのドメイン'}) のような形でtracker.initにオプションを追記します。
  - shopifyサイトのドメインにはサブドメインまで含む以下のような形でドメインを記載ください。
    - 例） aaa.myshopify.com
- チェックアウト中のページ以外の各ページで、閲覧（view）イベントが発生することを確認します

閲覧イベントが発火しているもののユーザーが統合されず、アクセス毎に別々のビジターとしてKARTEに記録されてしまっている場合、上記手順のうち、tracker.initにオプションを追記するステップが漏れている可能性がございます。tracker.initのオプション記載を見直しください。

ユーザータグの設置例
アカウントページ（/account）の閲覧時にユーザータグを発火させます。
ユーザータグの概要についてはユーザータグの設置をご参照ください。

手順
- 下記のユーザータグ実装例を参考に、タグを作成します
  - Shopify側の customer object から情報を取得しています
  - 連携したいフィールドに過不足がある場合は、タグをカスタマイズしてください

<script type="text/javascript">
try {
    tracker.user({
        user_id: '{{customer.id}}',
        email: '{{customer.email}}',
        name: '{{customer.name}}',
        first_name: '{{customer.first_name}}',
        last_name: '{{customer.last_name}}',
        subscription: '{{customer.accepts_marketing}}' ? Boolean('{{customer.accepts_marketing}}') : null,
        has_account: '{{customer.has_account}}' ? Boolean('{{customer.has_account}}') : null,
        phone: '{{customer.phone}}',
        tax_exempt: '{{customer.tax_exempt}}' ? Boolean('{{customer.tax_exempt}}') : null,
        orders_count: '{{customer.orders_count}}' ? Number('{{customer.orders_count}}') : null,
        total_spent: '{{customer.total_spent}}' ? Number('{{customer.total_spent}}') : null
    });
} catch(e) {
    if('tracker' in window) {
        tracker.track('_error', {
            message: e.message
        });
    }
}
</script>

作成したタグを下記に設置し、保存します

customers/account.liquidの末尾

アカウントページ閲覧時にユーザー情報（identify）イベントが発生することを確認します

注意
ログイン後にアカウントページに自動で遷移した際にユーザータグを発火させることを想定しています。
トップページなど他のページでもユーザータグを発火させたい場合は、対応するliquidファイルに追加でタグを設置してください。

購入（buy）イベントタグの設置例
注文状況ページ（/thank_you）の閲覧時に購入（buy）イベントタグを発火させます。
購入（buy）イベントタグの概要については購入（buy）イベントタグをご参照ください。

手順
- 下記の購入（buy）イベントタグ実装例を参考に、タグを作成します
  - Shopify側の customer object から情報を取得しています
  - 連携したいフィールドに過不足がある場合は、タグをカスタマイズしてください

<script type="text/javascript">
try {
    var items = [];
    {% for line_item in checkout.line_items %}
    items.push({
        item_id: '{{line_item.sku}}',
        name: '{{line_item.title}}',
        price: '{{line_item.final_price}}' ? Number('{{line_item.final_price}}') / 100 : null,
        quantity: '{{line_item.quantity}}' ? Number('{{line_item.quantity}}') : null,
        item_image_url: '{{line_item.image}}',
        item_url: '{{line_item.url}}',
    });
    {% endfor %}

    tracker.buy({
        transaction_id: '{{checkout.order_number}}',
        revenue: '{{checkout.line_items_subtotal_price}}' ? Number('{{checkout.line_items_subtotal_price}}')/100 : null,
        items: items,
        tax: '{{checkout.tax_price}}' ? Number('{{checkout.tax_price}}')/100 : null,
        shipping: '{{checkout.shipping_price}}' ? Number('{{checkout.shipping_price}}')/100 : null,
    });
} catch(e) {
    if ('tracker' in window) {
        tracker.track('_error', {
            message: e.message
        });
    }
}
</script>

作成したタグを下記に設置し、保存します

チェックアウト時の「追加スクリプト」の末尾

チェックアウトの注文状況ページ（/thank_you）で購入（buy）イベントが発生することを確認します

カスタムイベントタグの設置例（閲覧商品情報を取得するタグ）
商品詳細ページ（/products/#{ID}）の閲覧時にカスタムイベントタグを発火させ、閲覧商品情報を取得します。

参考: 閲覧商品情報を計測する

手順
- 下記のタグ実装例を参考に、タグを作成します
  - Shopify側の customer object から情報を取得しています
  - 連携したいフィールドに過不足がある場合は、タグをカスタマイズしてください

<script type="text/javascript">
try {
    tracker.track('view_item', {
        item_id: '{{product.id}}',
        name: '{{product.title}}',
        price: '{{product.price}}' ? Number('{{product.price}}')/100 : null,
        category: '{{product.type}}',
        brand: '{{product.vendor}}',
        item_url: '{{product.url}}',
        item_image_url: '{{product.featured_image}}'
    });
} catch(e) {
    if ('tracker' in window) {
        tracker.track('_error', {
            message: e.message
        });
    }
}
</script>

作成したタグを下記に設置し、保存します

product.liquidの末尾

商品詳細ページでview_itemイベントが発生することを確認します

注意点
上記タグでは、Shopifyの商品情報で登録する「商品タイプ(type)」を商品カテゴリ(category}として、「販売元{vendor}」をブランド(brand)として連携しています。
この対応関係が不適切な場合は、タグを修正してください。

カスタムイベントタグの設置例（カート情報を取得するタグ）
カートページ（/cart）の閲覧時にカスタムイベントタグを発火させ、カート情報を取得します。
また、注文状況ページ（/thank_you）の閲覧時に、カートが空になったことを連携します。

参考: カートイベントの計測

手順（カートページ）
- 下記のタグ実装例を参考に、タグを作成します
  - 連携したいフィールドに過不足がある場合は、タグをカスタマイズしてください

<script type="text/javascript">
try {
    var items = [];
    {% for line_item in cart.items %}
    items.push({
        item_id: '{{line_item.sku}}',
        name: '{{line_item.title}}',
        price: '{{line_item.final_price}}' ? Number('{{line_item.final_price}}')/100 : null,
        quantity: '{{line_item.quantity}}' ? Number('{{line_item.quantity}}') : null,
        item_image_url: '{{line_item.image}}',
        item_url: '{{line_item.url}}',
    });
    {% endfor %}

    var item_ids = items.map( function(item) { return item.item_id; });
    var item_names = items.map( function(item) { return item.name; });
    var item_prices = items.map( function(item) { return item.price; });
    var item_quantities = items.map( function(item) { return item.quantity; });
    var item_image_urls = items.map( function(item) { return item.item_image_url; });
    var item_urls = items.map( function(item) { return item.item_url; });

    tracker.track('cart', {
        price: '{{cart.items_subtotal_price}}' ? Number('{{cart.items_subtotal_price}}')/100 : null,
        quantity: '{{cart.item_count}}' ? Number('{{cart.item_count}}') : null,
        status: '{{cart.item_count}}' ? Number('{{cart.item_count}}')>0 : null,
        item_ids: item_ids,
        item_names: item_names,
        item_prices: item_prices,
        item_quantities: item_quantities,
        item_image_urls: item_image_urls,
        item_urls: item_urls,
        items: items
    });
} catch(e) {
    if ('tracker' in window) {
        tracker.track('_error', {
            message: e.message
        });
    }
}
</script>

作成したタグを下記に設置し、保存します

cart.liquidの末尾

カートページでcartイベントが発生することを確認します

手順（Thank Youページ）
カートが空になったことを連携するためのタグを作成します。

<script type="text/javascript">
try {
    tracker.track('cart', {
      status: false
    });
} catch(e) {
    if ('tracker' in window) {
        tracker.track('_error', {
            message: e.message
        });
    }
}
</script>

作成したタグを下記に設置し、保存します

チェックアウト時の「追加スクリプト」の末尾

チェックアウトの注文状況ページ（/thank_you）でcartイベントが発生することを確認します

注意点
カートへの商品追加時にカートページに自動遷移しない場合、カートページ閲覧前に離脱してしまったユーザーについては、実際のカート情報とKARTEに連携されたカート情報に齟齬が発生することがあります。

ご利用開始の流れ

タグ設置・イベント計測

KARTE基礎知識・仕様

インサイト

アクション

接客タイプ

トーク

データハブ

レポート

ライトサポート

ストア

お知らせ

設定メニュー

オンライン決済

KARTE Signals

KARTE Message β

メッセージ

ライブ

ブロックス

KARTE for App

アクション

スターターマニュアル

レポート

インサイト

データハブ

KARTE Talk

ユーザーダッシュボード

KARTE for App

KARTE Academy

KARTE CX Clip

KARTE Forum

KARTE Developer Portal

Shopifyへの導入

注意点

Shopifyへのタグ設置方法

設置例

間違い、誤植等があれば教えて下さい😃

目次