Makeshopで構築されたサイトにKARTEのタグを設置する際の参考手順を紹介します。
注意点
- MakeShopの契約プランやカスタマイズ状況に応じて、タグが意図通りに動作しない可能性があります
- KARTEに連携したいデータに過不足がある場合は、このページで紹介している設定を参考に個別に設定してください
計測タグの設置例
計測タグの概要については下記をご覧ください。
まず、KARTEの管理画面から計測タグをコピーします。
独自デザインページへの計測タグ設置
- MakeShop管理画面の下記の2箇所に、コピーした計測タグを設置し、保存します
- [独自デザイン > PC > 共通head管理]
- [全ページ共通]のheadタグ内の任意の場所
- [独自デザイン > スマホ > (使用中のテンプレートの)編集 > 共通head管理]
- [全ページ共通]のheadタグ内の任意の場所
- [独自デザイン > PC > 共通head管理]
オーダーフォーム画面
- MakeShop管理画面の下記の箇所に、コピーした計測タグを設置し、保存します
- [ショップ作成 > 決済・注文関連の設定 > 注文画面案内文の設定]
- [オーダーフォームに表示する文章]のなるべく上
- [ショップ作成 > 決済・注文関連の設定 > 注文画面案内文の設定]
注文完了画面
- MakeShop管理画面の[プロモーション > タグの設定 > 任意アフィリエイト設定]を開きます
- [コンバージョンタグ設定]に次のように入力します
- [出力設定]
- 「出力する」にチェック
- [アフィリエイト名]
- 例) 「KARTE計測タグ: 注文完了画面」
- [出力画面]
- 「注文完了画面」を選択
- [出力箇所]
- 「head内」を選択
- [コンバージョンタグ設定]
- [開始部]にコピーした計測タグを設置
- [出力設定]
- 保存します
会員登録完了画面(購入時)
こちらのタグで計測できるのは購入時の会員登録のみとなります。新規会員登録ページなどからの会員登録は計測されません。
- MakeShop管理画面の[プロモーション > タグの設定 > 任意アフィリエイト設定]を開きます
- [コンバージョンタグ設定]に次のように入力します
- [出力設定]
- 「出力する」にチェック
- [アフィリエイト名]
- 例) 「KARTE計測タグ: 会員登録完了画面(購入時)」
- [出力画面]
- 「会員登録完了画面」を選択
- [出力箇所]
- 「head内」を選択
- [コンバージョンタグ設定]
- [開始部]にコピーした計測タグを設置
- [出力設定]
- 保存します
ユーザータグの設置例
ログイン状態でのページ閲覧時に、ユーザータグを発火させます。ユーザータグの概要については下記をご覧ください。
手順
- 下記のユーザータグ実装例を参考に、タグを作成します
- 連携したいフィールドに過不足がある場合は、タグをカスタマイズしてください
<script type="text/javascript">
try{
setTimeout(function() {
var el = document.getElementsByName('login_id')[0];
if (!el || !el.value) return;
var login_id = el.value;
tracker.user({
user_id: login_id,
});
}, 200);
} catch (e) {
if('tracker' in window) {
tracker.track('_error', {
error_message: e.message
});
}
}
</script>
- MakeShop管理画面の下記の2箇所に、コピーした計測タグを設置し、保存します
- [独自デザイン > PC > 上段メニュー管理]
- [上段メニュー]のbodyタグ内の任意の場所
- [独自デザイン > スマホ > (使用中のテンプレートの)編集 > ヘッダー > (使用中のデザインの)編集]
- [HTML編集]の任意の場所
- [独自デザイン > PC > 上段メニュー管理]
- ログイン状態でトップページ等を閲覧した際に、ユーザー情報(
identify
)イベントが発生することを確認します
コンバージョンタグの設置例
注文完了画面の閲覧時に、コンバージョンタグを発火させます。コンバージョンタグの概要については下記をご覧ください。
手順
- MakeShop管理画面の[プロモーション > タグの設定 > 任意アフィリエイト設定]を開きます
- [コンバージョンタグ設定]に次のように入力します
- [出力設定]
- 「出力する」にチェック
- [アフィリエイト名]
- 例) 「KARTEコンバージョンタグ」
- [出力画面]
- 「注文完了画面」を選択
- [出力箇所]
- 「body直後」を選択
- [コンバージョンタグ設定]
- (後述)
- [出力設定]
- [開始部]に次のように入力します
<script type="text/javascript">
(function() {
try{
var items = [];
- [繰り返し部]に次のように入力します
items.push({
item_id: '[ITEM_CD_SYS]',
name: decodeURI('[ITEM_NAME_UTF8_20]'),
price: '[ITEM_PRICE]' ? Number('[ITEM_PRICE]') : null,
quantity: '[ITEM_COUNT]' ? Number('[ITEM_COUNT]') : null,
});
[区切り文字]は未入力のままにします
[終了部]に次のように入力します
// 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; });
tracker.buy({
transaction_id: '[ORDER_NUM]',
revenue: '[TOTAL_AMOUNT]' ? Number('[TOTAL_AMOUNT]') : null,
items: items,
item_ids: item_ids,
item_names: item_names,
item_prices: item_prices,
item_quantities: item_quantities,
});
var user_id = '[USER_ID]';
if (!user_id || user_id.indexOf('[') === 0) return;
tracker.user({
user_id: user_id,
});
} catch (e) {
if('tracker' in window) {
tracker.track('_error', {
error_message: e.message
});
}
}
})();
</script>
- 保存します
- 注文完了画面で購入(
buy
)イベントが発生することを確認します
会員登録タグの設置例
こちらのタグで計測できるのは購入時の会員登録のみとなります。新規会員登録ページなどからの会員登録は計測されません。
会員登録完了画面の閲覧時に、会員登録(signup)イベントを発生させるタグを発火させます。カスタムタグの概要については下記をご覧ください。
手順
- MakeShop管理画面の[プロモーション > タグの設定 > 任意アフィリエイト設定]を開きます
- [コンバージョンタグ設定]に次のように入力します
- [出力設定]
- 「出力する」にチェック
- [アフィリエイト名]
- 例) 「KARTE会員登録タグ」
- [出力画面]
- 「会員登録完了画面」を選択
- [出力箇所]
- 「body直後」を選択
- [コンバージョンタグ設定]
- [開始部]に次のように入力します
- [出力設定]
<script type="text/javascript">
try{
tracker.track("signup");
} catch (e) {
if('tracker' in window) {
tracker.track('_error', {
error_message: e.message
});
}
}
</script>
- 保存します
- 会員登録完了画面で会員登録(
signup
)イベントが発生することを確認します