前提


手順


  1. GTMのトリガー設定

    1. コムチャット用サンキューページのURLを指定したページビュートリガーを作成

      スクリーンショット 2024-09-03 17.41.07.png

    2. ページURLは活用するページのURLに適宜修正下さい

    3. 最後の「?」は必ずつけるようお願いします。サンキューページに誘導する際、必ずパラメータを付与するためです

  2. GTMの変数設定

    1. 添付のように新規のユーザー定義変数を設定する

      スクリーンショット 2024-09-03 17.54.07.png

      1. 変数のタイプ:URL、要素タイプ:クエリ、クエリキー:以下の表の中で必要なものをそれぞれ設定
      2. 変数名は自由に変更頂いていかまいませんが例えば「CC_{変数名}」として頂くとわかりやすいかと思います。 ※上記の添付はCC_transaction_id
    2. チャットボット用サンキューページに引き継がれるパラメータ情報

      クエリキー 値に出力される内容 値の例
      transaction_id 注文番号 1001
      currency 注文時の通貨 JPY
      value 購入金額(税込) 3300
      tax 税金 300
      shipping 送料 0
      coupon クーポンコード NEW500
      id SKU
      ※Google&YouTubeアプリで出力される商品id情報と同じ shopify_JP_8632705777950_14864320758046
      name 商品名 THE ハックルベリー - 化粧水
      brand ブランド名 CommChat
      category アイテムカテゴリー ChatBot
      variant バリアント情報 350ml
      price 商品単価 3000
      quantity 数量 1
      customer_id 顧客番号 1010
      1. もし他の変数を出力してほしいという場合、CSチームにご連絡下さい
  3. タグ設定

    1. トリガーは1で設定したチャットボット用サンキューページとし、タグを設定する

    2. タグ内に出力したい値は変数として記述する

      1. 例)Meta広告

        <script>
          fbq('track', 'Purchase', {
            value: {{CC_value}},
            currency: '{{CC_currency}}',
            content_ids: '{{CC_transaction_id}}',
          });
        </script>
        
        1. {{変数名}}については上記の2-aで設定された変数名を指定して下さい
      2. 例)Google広告

        <!-- Event snippet for 購入 conversion page -->
        <script>
          gtag('event', 'conversion', {
              'send_to': '[タグID]',
              'value': {{CC_value}},
              'currency': '{{CC_currency}}',
              'transaction_id': '{{CC_transaction_id}}'
          });
        </script>
        
        1. [タグID]はGoogle広告管理画面で出力したいタグのIDを指定して下さい
        2. {{変数名}}については上記の2-aで設定された変数名を指定して下さい
      3. 例)a8.net

      <span id="a8sales"></span>
      <script src="//statics.a8.net/a8sales/a8sales.js"></script>
      <script>
      a8sales({
      "pid": "[プログラムID]",
      "order_number": "{{CC_transaction_id}}",
      "currency": "JPY",
      "items": [
      {
      "code": "a8",
      "price": 1,
      "quantity": 1,
      },
      ],
      "total_price": "{{CC_value}}"
      });
      </script>
      
      1. プログラムIDはa8.netに指定されたIDを活用下さい
      2. {{変数名}}については上記の2-aで設定された変数名を指定して下さい

    <aside> 💡

    ※以下 参考例

    ※こちらはアドエビスを利用されている際の例となります。ご利用中の広告媒体にあわせて設定をお願いいたします。

    スクリーンショット 2024-09-03 18.png

    </aside>

  4. GTM設定のプレビュー確認

    1. プレビューモードでチャットボット用サンキューページに遷移し、ちゃんとタグ発火できているか確認する
  5. GTM設定の公開

    1. これで作業完了です