Shopifyで構築されたECサイトにKARTEのタグを設置する際の参考手順を紹介します。
注意点
- Shopifyの契約プランやカスタマイズ状況に応じて、タグが意図通りに動作しない可能性があります
- KARTEに連携したいデータに過不足がある場合は、このページで紹介しているタグのサンプルを書き換えてから設置してください
- Shopifyの通常プランの場合、チェックアウトをカスタマイズできません。そのため、購入フローのページではタグ設置ができずトラッキングやアクションの配信はできません
Shopifyへのタグ設置方法
Shopifyにタグ設置するための一般的な方法を紹介します。
チェックアウト以外のページ
Shopify管理画面から、[販売チャネル > オンラインストア > テーマ > 現在のテーマ > アクション > コードを編集する]を選択します。
コード編集画面から、テーマに使われているliquidファイル(HTMLを生成するためのテンプレート)を直接編集することができます。適切なliquidファイルにタグを設置することで、対応するページが開かれたときにタグを発火させることができます。
注文状況ページ(/thank_you
)
通常は、チェックアウト(購入)に関するページをliquidファイル等で直接編集することはできません。ただし、Shopify管理画面の[設定 > チェックアウト > 注文処理 > 追加スクリプト]にタグを登録することで、チェックアウトの注文状況ページ(/thank_you
)でタグを発火することができます。
計測タグの設置例
計測タグの概要については下記をご覧ください。
手順
- KARTEの管理画面から、「標準」の計測タグをコピーします
- 下記の2箇所に、コピーした計測タグを設置し、保存します
theme.liquid
の</head>
の直前- チェックアウト時の「追加スクリプト」の冒頭
- チェックアウト中のページ以外の各ページで、閲覧(
view
)イベントが発生することを確認します
注意
- 通常は、チェックアウト中のページについて、計測タグを設置することはできません
- つまり、閲覧をトラッキングしたり、アクションを配信したりすることはできません
ユーザータグの設置例
アカウントページ(/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ファイルに追加でタグを設置してください
コンバージョンタグの設置例
注文状況ページ(/thank_you
)の閲覧時に、コンバージョンタグを発火させます。
コンバージョンタグの概要については下記をご覧ください。
コンバージョンタグの設置 | KARTEサポートサイト
手順
- 下記のコンバージョンタグ実装例を参考に、タグを作成します
- 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}}',
});
{% endfor %}
// itemsの各key毎の値の配列を生成
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; });
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,
item_ids: item_ids,
item_names: item_names,
item_prices: item_prices,
item_quantities: item_quantities,
item_image_urls: item_image_urls,
});
}catch(e){
if('tracker' in window) {
tracker.track('_error', {
message: e.message
});
}
}
</script>
- 作成したタグを下記に設置し、保存します
- チェックアウト時の「追加スクリプト」の末尾
- チェックアウトの注文状況ページ(
/thank_you
)で購入(buy
)イベントが発生することを確認します
カスタムタグの設置例
一般的によく使われるカスタムタグについて、設置例を紹介します。
カスタムタグの概要については下記をご覧ください。
閲覧商品情報を取得するタグ
商品詳細ページ(/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
)の閲覧時に、カートが空になったことを連携します。。
手順(カートページ)
- 下記のタグ実装例を参考に、タグを作成します
- 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}}',
});
{% 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; });
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,
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
イベントが発生することを確認します
注意点
- Shopifyの仕様上、カートへの商品追加時にカートページに自動遷移しないため、カートページ閲覧前に離脱してしまったユーザーについては、実際のカート情報とKARTEに連携されたカート情報に齟齬が発生することがあります