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

注意点

Shopifyの契約プランやカスタマイズ状況に応じて、タグが意図通りに動作しない可能性があります
KARTEに連携したいデータに過不足がある場合は、このページで紹介しているタグのサンプルを書き換えてから設置してください
Shopify Plusを利用しない場合、チェックアウトをカスタマイズできません。そのため、購入フローのページではタグ設置ができずトラッキングやアクションの配信はできません

Shopifyへのタグ設置方法

Shopifyにタグ設置するための一般的な方法を紹介します。

チェックアウト以外のページ

Shopify管理画面から、[販売チャネル > オンラインストア > テーマ > 現在のテーマ > アクション > コードを編集する]を選択します。

null

コード編集画面から、テーマに使われているliquidファイル（HTMLを生成するためのテンプレート）を直接編集することができます。適切なliquidファイルにタグを設置することで、対応するページが開かれたときにタグを発火させることができます。

注文状況ページ（`/thank_you`）

Shopify Plusを利用しない場合、チェックアウト（購入）に関するページ（checkout.liquid）を直接編集することはできません。ただし、Shopify管理画面の[設定 > チェックアウト > 注文処理 > 追加スクリプト]にタグを登録することで、チェックアウトの注文状況ページ（/thank_you）でタグを発火することができます。

null

計測タグの設置例

計測タグの概要については下記をご覧ください。

計測タグの設置方法 | KARTEサポートサイト

手順

KARTEの管理画面から、「標準」の計測タグをコピーします
下記の2箇所に、コピーした計測タグを設置し、保存します
- theme.liquidの</head>の直前
- チェックアウト時の「追加スクリプト」の冒頭
チェックアウト中のページ以外の各ページで、閲覧（view）イベントが発生することを確認します

注意

Shopify Plusを利用しない場合、チェックアウト中のページについては計測タグを設置することはできません
- つまり、閲覧をトラッキングしたり、アクションを配信したりすることはできません

ユーザータグの設置例

アカウントページ（/account）の閲覧時に、ユーザータグを発火させます。

ユーザータグの概要については下記をご覧ください。

ユーザータグの設置 | KARTEサポートサイト

手順

下記のユーザータグ実装例を参考に、タグを作成します
- 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）イベントタグ | KARTEサポートサイト

手順

下記の購入（buy）イベントタグ実装例を参考に、タグを作成します
- checkout 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）イベントが発生することを確認します

カスタムタグの設置例

一般的によく使われるカスタムタグについて、設置例を紹介します。

カスタムタグの概要については下記をご覧ください。

カスタムタグの設置 | KARTEサポートサイト

閲覧商品情報を取得するタグ

商品詳細ページ（/products/#{ID}）の閲覧時に、閲覧商品情報を取得します。

参考: 閲覧商品情報を計測する | KARTEサポートサイト

手順

下記のタグ実装例を参考に、タグを作成します
- product 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）の閲覧時に、カートが空になったことを連携します。

参考: カートイベントの計測 | KARTEサポートサイト

手順（カートページ）

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

<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 for App

アクション

スターターマニュアル

レポート

インサイト

データハブ

KARTE Talk

ユーザーダッシュボード

KARTE for App

KARTE Academy

KARTE CX Clip

KARTE Forum

KARTE Developer Portal

Shopifyへの導入

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

目次