GA4タグ実装マニュアル

リピストクロス様用 GA4タグ実装マニュアル

弊社にてGA4タグを貴社環境に合わせてカスタマイズするため、現在設定されている変数の記述を確認させていただきたく、お手数ではございますが、以下の手順にてソースコードのコピーをお願いいたします。

はじめにお願い

作業をスムーズに進めるため、まずは以下の「提出用フォーマット」をコピーし、弊社への返信用メール(またはチャット)の入力欄に貼り付けてください。

その後、このマニュアルの手順に従って、貼り付けたフォーマットの空欄を埋めていってください。

⚠ 重要なご注意(必ずお読みください)

【❌ 間違いやすいポイント】
ブラウザで自社サイトを開き、右クリックして「ページのソースを表示」でコピーしたものは使用できません
必ずリピストクロスの「管理画面」の中にある、プログラム(ソースコード)をコピーしてください。
<!--{$arrProduct...}--> といった記号が含まれている必要があります)

ご提出時のお願い

  • 画像(スクリーンショット)やPDF、Wordファイルではなく、必ずソースコードの「文字(テキスト)」をそのままメールやチャットに貼り付けるか、テキストファイル(.txt)でご送付ください。
  • スマホ版も必須:PCとスマホでプログラムが異なる場合があるため、両方の確認をお願いします。

1. GA4測定IDの確認【必須】

GA4の計測を行うために、貴社のGoogleアナリティクス測定IDが必要です。

【手順】

  1. Googleアナリティクス(https://analytics.google.com/)にログインしてください。
  2. 左下の 「管理」(歯車アイコン)をクリックしてください。
  3. 「データストリーム」 をクリックしてください。
  4. 該当するウェブストリーム(サイト名が表示されているもの)をクリックしてください。
  5. 画面右上に表示される 「G-」で始まる測定ID(例:G-ABC123XYZ)をコピーしてください。

⚠ ご注意:
「GTM-」から始まるID(Googleタグマネージャー)ではありません。必ず 「G-」 から始まるIDをご記入ください。

【メモ欄:GA4測定ID】

2. 商品詳細ページの確認

【手順A】 PC用コードの取得

  1. 管理画面の 「デザイン管理」「PC配置設定」「商品詳細ページ」 を開いてください。
  2. 「商品詳細メイン」 ブロックの「編集」ボタンを押し、ソースコード入力欄を表示します。
  3. キーボードの Ctrl + F (Macは Command + F) で以下のキーワードを順番に検索してください。
    • product_id または product_code
    • price02 または inctax
    • product_name または name
    • ※「関連商品」や「おすすめ商品」エリアではなく、メインの商品情報の箇所であることを確認してください。
  4. ヒットした行を含む、前後10行〜20行ほど(<!--{ から }--> で囲まれた部分が含まれるように)をコピーして貼り付けてください。
【メモ欄:商品詳細ページ(PC / スマホ)】

【手順B】 スマホ用コードの取得

  1. 管理画面の 「デザイン管理」「スマートフォン配置設定」「商品詳細ページ」 を開いてください。
    ※もし「スマートフォン配置設定」というメニュー自体がない場合は、「レスポンシブ(PC・スマホ共通)」です。その場合は 「PC版と共通です」 とご回答ください。
  2. 配置設定画面が開くものの、中身が空欄だったり「PCの設定を使用する」というチェックが入っている場合も、「PC版と共通です」 とご回答ください。
  3. それ以外の場合はPCと同様にコードを検索し、前後10行をコピーしてください。
【メモ欄:商品詳細ページ(PC / スマホ)】
☑ 提出前の確認

3. 購入完了ページ(サンクスページ)の確認

このページには「おすすめ商品」など複数のループが存在することが多いため、以下の手順で「注文明細」のループを探してください。

⚠ 間違いやすいページにご注意ください
  • 注文内容確認ページ: 「注文する」ボタンがある、確認画面ではありません。
  • 注文完了ページ: 注文確定後に表示される、「ありがとうございました」と表示されるページ(サンクスページ)のコードが必要です。

「メール設定」の中にある「注文受付メール」などのコードとも異なりますのでご注意ください。

【手順A】 PC用コードの取得

  1. 管理画面の 「デザイン管理」「PC配置設定」「購入完了ページ」 を開いてください。
    ※ここにない場合:「プロモーション」>「タグ設定」>「コンバージョンタグ設定」
  2. ソースコードを表示し、まずは foreach という文字で検索してください。
    • ※もし foreach が見つからない場合は section という文字で検索してください。
    • ※もしどちらも見つからない場合は product_idgoods_id で検索し、商品情報が並んでいる箇所を探してください。
    • ※ページ内に複数ある場合は、近くに product_nameprice などの文字がある、「注文商品のリスト表示」と思われる箇所を探してください。
    ★重要:間違った場所をコピーしないために
    検索して見つかったループの中に、price(金額)quantity(数量) といった言葉が含まれているか必ず確認してください。
    もし「画像(image)」や「リンク(href)」しか書かれていない場合は、それは「おすすめ商品」の可能性が高いです。その場合は、さらに下にある別の foreach または section を探してください。
  3. その foreach (または section) を含むブロック全体と、そこから下にスクロールして payment_total (合計金額)が出てくるあたりまでを、可能な限り広く(50行〜100行程度) コピーして貼り付けてください。
    ★強く推奨:
    必要な箇所を探すのが難しいため、キーボードの Ctrl + A (Macは Command + A) でソースコードを「すべて選択」し、ページ丸ごと全部をコピーして貼り付けていただくのが最も確実です。
    (不要な部分は弊社側でカットしますのでご安心ください)
  4. 追加確認①: 画面内を order_no または order_id で検索し、「注文番号」を表示している箇所があれば、その行もコピーしてください。
  5. 追加確認②: tax(税金)や deliv_fee または shipping(送料)で検索し、ヒットすればその行もコピーしてください。
  6. 追加確認③: もし payment_total が見つからない場合は、totalgrand_total で検索してみてください。

【手順B】 スマホ用コードの取得

  1. 管理画面の 「デザイン管理」「スマートフォン配置設定」「購入完了ページ」 を開いてください。
  2. 同様に foreach で検索し、注文商品ループ周辺〜合計金額まで広範囲のコードをコピーしてください。
    ※PC版と同様に、order_nopayment_total 等も確認してください。
    ※「スマートフォン配置設定」メニューがない、または編集画面が空の場合は 「PC版と共通です」 とご回答ください。
【メモ欄:購入完了ページ(PC / スマホ)】
☑ 提出前の確認

【追加のお願い:タグ設定欄の確認】
管理画面の 「プロモーション」「タグ設定」「コンバージョンタグ設定」 を開いてください。
もし、その中の 「購入完了ページ(サンクスページ)」 欄に、すでに何らかのコード(アフィリエイトタグなど)が入っている場合は、そのコードも全てコピーして貼り付けてください。

【メモ欄:コンバージョンタグ設定の既存コード】
【追加確認:タグ設定画面でのSmarty変数利用可否】
「コンバージョンタグ設定」の入力欄に、試しに <!--{$test}--> と入力して保存→購入完了ページを表示した際、その文字がそのまま表示されますか?
※この確認は任意です。わからない場合は空欄で構いません。

4. ログインユーザー情報の確認【任意】

ログインしている会員の紐付け(ユーザーID計測)のために、会員IDの変数を確認させてください。
※この項目は任意です。わからない場合はスキップしても構いません。

【手順】

  1. 管理画面の 「デザイン管理」「共通設定」「ヘッダー」(または「会員情報表示エリア」「ログイン状態表示」など)を開いてください。
  2. キーボードの Ctrl + Fsession または customer_id または member_id と検索してください。
  3. ヒットした行を含む、前後5行ほどをコピーして貼り付けてください。
    ※見つからない場合は「見つかりませんでした」とご回答ください。
【ご回答欄:ログインユーザー情報】
☑ 提出前の確認