目次
① 基本タグの設置(全ページ共通)
弊社より納品いたしました修正済みタグ(ソースコード)を、以下の手順に従って管理画面に貼り付けてください。
⚠ 作業前の重要なご注意
- バックアップ推奨: 作業を行う前に、現在の入力欄にあるコードをすべてコピーし、パソコンの「メモ帳」などに貼り付けて保存しておくことを強くおすすめします。(万が一トラブルがあった際、すぐに元に戻せます)
- 上書き禁止: すでに何らかの文字やコードが書かれている場合は、絶対にそれを消さないでください。
- 追記する位置: 既存のコードがある場合は、その一番下の行に改行を入れてから貼り付けてください。
- タグの入れ子禁止: 既存の
<script> ... </script>の内側には貼り付けないでください。必ず外側(終わりのタグの後ろ)に貼り付けてください。
サイト全体で動作する基本タグです。
- 管理画面の 「プロモーション」 > 「タグ設定」 > 「共通ヘッダタグ設定」 を開いてください。
※もし場所が見当たらない場合は、「デザイン管理」>「共通設定」>「ヘッダー」などを確認してください。 - ⚠ 重要:既存の設定があっても「必ず」設置してください
今回は、より正確な計測を行うために本プロジェクト専用の測定IDを使用します。
そのため、すでに他社のGA4タグが入っていたり、Googleタグマネージャー(GTM)が設定されている場合でも、それらは触らずに、追加で弊社の「①基本タグ」を必ず設置してください。
※専用の測定IDを使用するため、既存のタグと競合することはありません。安全に併用いただけます。
- 既存のタグを削除する必要はありません。
- 既存のタグの「下」に、弊社のタグを追記する形で設置してください。
- 「共通ヘッダタグ」 という入力欄がある場合、その入力欄の一番最後の行(※既存のタグの外側)に、弊社からお渡しした 「①基本タグ」 のコードを貼り付けてください。
- 「登録する」ボタンを押して保存してください。
🛑 保存ボタンを押す前の確認
② 商品詳細ページタグの設置
商品閲覧数を計測するタグです。PCとスマホで設定場所が異なります。
⚠【最重要】設置場所の絶対ルール
貼り付ける場所を間違えると、「カートに入れる」ボタンが押せなくなります。
以下のルールを必ず守ってください。
<form>タグの中には絶対に入れないでください。
コードの中に<form ...>から</form>までの記述がある場合、その「間」には貼り付けないでください。
必ず</form>という「閉じタグ」よりも 下の行 に貼り付けてください。❌ 絶対にダメな場所(フォームの中)
<form name="form1" ... > <!-- ここに貼り付けるとカートボタンが壊れます --> <input type="hidden" ... > </form>⭕ 正しい場所(フォームの外 / 一番下)
<form name="form1" ... > ... </form> <!-- ここ(一番下)なら安全です --> [今回お渡ししたコード]- 迷ったら「一番下」へ
どの場所が良いか判断できない場合は、入力欄に入っている全てのコードの一番最後の行(一番下)に貼り付けてください。これが最も安全です。
🛑 保存ボタンを押す前の最終確認
以下の設定になっていないと、カートボタンが動かなくなります。必ず確認してください。
【PC版の設置】
- 管理画面の 「デザイン管理」 > 「PC配置設定」 > 「商品詳細ページ」 を開いてください。
- 画面下部にある 「ヘッダ・フッタ編集」 または 「フリースペース編集」 などを探してください。
- ※もし「JavaScript埋め込み欄」があればそこが最適です。
- ※上記がない場合は、「商品詳細メイン」の「編集」を開き、コードの一番最後(既存タグの外側)に貼り付けてください。
⚠ 「商品詳細メイン」を編集する場合の追加注意:
・既存コードの</form>タグより下に配置してください
・<!--{/if}-->などのSmarty閉じタグより下に配置してください
・不安な場合は「フリースペース」欄を探すか、弊社までご相談ください
- 弊社からお渡しした 「②商品詳細ページタグ(PC用)」 または 「②商品詳細ページタグ(共通)」 のコードを貼り付けて保存してください。
【スマホ版の設置】
- 管理画面の 「デザイン管理」 > 「スマートフォン配置設定」 > 「商品詳細ページ」 を開いてください。
- PC版と同様に、弊社からお渡しした 「②商品詳細ページタグ(スマホ用)」 のコードを、フリースペースまたはメインエリアの一番最後(既存タグの外側)に貼り付けて保存してください。
- ※「共通」ファイルの場合: 弊社から「②商品詳細ページタグ(共通)」という名前でお渡しした場合は、PC版のみに設置すればスマホも計測されますので、スマホ版への作業は不要です。
- ※設定メニューがない場合: スマホ設定メニューがない場合は「レスポンシブ」設定ですので、PC版への設置のみで完了です。
⚠ 重要:隠れた入力欄に注意
「PCの設定を使用する」にチェックが入っている場合でも、一度チェックを外して中身が空であることを確認してください。
もし入力欄に何か文字が入っている場合は、その一番下にも今回のタグを貼り付けてから、再度「PCの設定を使用する」にチェックを入れて保存 してください。
(念のため、両方にタグが入っている状態にするのが最も安全です)
動作確認のコツ
設置後、必ずご自身のスマホで購入テストを行う際、「カートに入れる」ボタンが正常に反応するかを真っ先に確認してください。
「PCの設定を使用する」にチェックが入っている場合でも、一度チェックを外して中身が空であることを確認してください。
もし入力欄に何か文字が入っている場合は、その一番下にも今回のタグを貼り付けてから、再度「PCの設定を使用する」にチェックを入れて保存 してください。
(念のため、両方にタグが入っている状態にするのが最も安全です)
動作確認のコツ
設置後、必ずご自身のスマホで購入テストを行う際、「カートに入れる」ボタンが正常に反応するかを真っ先に確認してください。
③ 購入完了タグの設置(コンバージョン)
売上を計測するタグです。
🛑 保存ボタンを押す前の最終確認
以下の設定になっていないと、カートボタンが動かなくなります。必ず確認してください。
【推奨設定(デザイン管理)】
- 管理画面の 「デザイン管理」 > 「PC配置設定」 > 「購入完了ページ(サンクスページ)」 を開いてください。
※もし上記がない場合は、「デザイン管理」>「モバイル配置設定」または「スマートフォン配置設定」を確認してください。 - ソースコードの一番最後の行(※既存の記述の外側)に改行を入れて、弊社からお渡しした 「③購入完了タグ」 を貼り付けてください。
※「(共通)」ファイルの場合は、1つのコードを貼るだけで完了です。
※PC・スマホで欄が分かれている場合は、それぞれのコードを貼り付けてください。 - 「登録する」ボタンを押して保存してください。
【代替設定(タグ設定画面)】
※「デザイン管理」に設置できない場合、または弊社から「タグ設定画面への設置でOK」との案内があった場合のみ、こちらを使用してください。
⚠ 重要: 弊社から特に指示がない場合は、上記の「推奨設定(デザイン管理)」をご利用ください。「代替設定」はSmarty変数が使える環境でのみ動作します。
- 管理画面の 「プロモーション」 > 「タグ設定」 > 「コンバージョンタグ設定」 を開いてください。
- 「購入完了ページ(サンクスページ)」 という入力欄を探してください。
ここにはアフィリエイトタグなどが既に入っている場合がありますが、絶対に消さないでください。 - 既存の記述がある場合、一番最後の行(※既存タグの外側)に改行を入れて、弊社からお渡しした 「③購入完了タグ」 を貼り付けてください。
※このタグはページ内のどこに出力されても動作するように作られていますが、もし「出力場所」を選べるオプションがある場合は「body内」または「下部」を選択してください(選択肢がなければそのままで構いません)。 - 「登録する」ボタンを押して保存してください。
④ 動作確認(重要)
設置が終わりましたら、以下の手順で正しく計測されているかご確認ください。
【確認0】 サイト表示の安全確認(最優先)
タグを設置して保存した後、すぐにそのページ(商品ページや購入完了ページ)をブラウザで開いてください。
もし異常があれば、直ちに追加したタグを削除して保存し直し、元の状態に戻してください。
【確認A】商品閲覧(view_item)の確認
- Googleアナリティクスの画面を開き、左メニューの 「レポート」 > 「リアルタイム」 を開いておきます。
- ショップの商品ページにアクセスしてください。
- リアルタイムレポートの「イベント数(イベント名)」の欄に、
view_itemという文字が表示されれば成功です。
【確認B】ユーザーID(user_id)の確認
- ショップにログインした状態で商品ページにアクセスしてください。
- リアルタイムレポートの 「ユーザー」 欄、または「ユーザー属性」>「ユーザーのプロパティ」で 数字のID が表示されていれば成功です。
※反映に数分かかる場合があります。
【確認C】購入完了(purchase)の確認
- 実際にテスト購入を行ってください。
- サンクスページ表示後、リアルタイムレポートの「イベント数」に
purchaseが表示されれば成功です。 - リロードテスト: サンクスページを再読み込み(F5キー)しても、
purchaseイベントが 2回目は送信されない ことを確認してください(重複防止機能の確認)。
⑤ うまく動作しない場合
- 【緊急時の対応】
- もしタグを設置して保存した後、画面が真っ白になったり、レイアウトが大きく崩れたりした場合は、今回追加したタグを一度すべて削除して保存し直してください。
- これで元の状態に戻ります。その上で、弊社までご連絡ください。
- タグの入れ子になっていないか?
- 既存の
<script>...</script>の内側に貼り付けてしまうと動作しません。
- 既存の
- 測定IDは正しいか?
G-で始まる測定IDが正しく入っているか確認してください。
- キャッシュのクリア
- ブラウザのキャッシュをクリアして再度アクセスしてみてください。
- 【キャッシュクリアの方法】
- Windows:
Ctrl + Shift + RまたはCtrl + F5 - Mac:
Command + Shift + R - または、ブラウザの設定から「閲覧データを削除」→「キャッシュされた画像とファイル」を選択して削除
- Windows:
- 上記で解決しない場合
- 弊社までご連絡ください。