分析
      ホームに戻る
      1. ホーム
      2. 各機能のご紹介
      3. 分析

      Googleタグマネージャーで購入追跡を実装する

      Googleタグ マネージャー(GTM)を使用してFirework Purchase Trackingを実装する要件と方法を学びます。

      Firework Purchase Trackingは、Webサイトで製品を購入する際の顧客のショッピングエクスペリエンスとパフォーマンスに関する貴重な洞察を提供します。Firework Purchase Trackerを使用すると、Fireworkプレーヤーと対話した顧客からの販売関連の重要なアクションをキャプチャできます。

      Firework Purchase Trackingを実装することで、Fireworkに起因する総商品量 (GMV) と平均注文額 (AOV) を決定できます。

      要件：

      正確なデータを確実にキャプチャするには、Firework Purchase Tracking Template を使用して新しいタグを正しく設定し、必要な情報をWebページ上のGTM dataLayer オブジェクトにプッシュすることが重要です。

      1. Googleタグマネージャーが実装されていることを確認します。
      2. 以下の例に示すように、注文の詳細をプッシュするGoogleタグ マネージャーでデータレイヤーオブジェクトを設定します。
        <script>
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          order_id: '12345',
          order_value: '50.54',
          currency: 'CAD',
          country: 'Canada',
          subtotal: '40.89',
          payment_method: 'AMEX',
          product: [{ ext_product_id: '4483', price: 31, quantity: 15 }],
          ext_customer_identifier: '1234-1234-1234-1234'

        });
        </script>
      3. 重要 - この実装では、購入情報をFireworkに適切に送信するために、次のデータポイントをデータレイヤーにプッシュする必要があります。

        1. order_id: 文字列
          注文/トランザクションの ID 例: 「12345」。

        2. order_value: 数値
          注文の合計金額、例: 100。

        3. 通貨: 文字列
          order_value が購入された通貨。サポートされている通貨コードのリストをご覧ください。例えば。 「米ドル」、「カナダドル」など

        4. 国: 文字列
          顧客の国

        5. 小計?: 数値

        6. 支払い方法?: 文字列
          注文の支払い方法 (例: AMEX、VISA など)

        7. 製品?: 配列<{ ext_product_id: string;価格: 番号;数量: 数値 }>
          カンマ区切りの文字列または製品 ID、注文の一部であるその価格および数量の配列。

        8. ext_customer_identifier?: 文字列
          販売者のユーザー ID を顧客に渡す方法。

      4. 注文が完了したときのトリガーを挿入します (購入確認ページ)。

      dataLayerの詳細については、このページを参照してください。

      ライブ配信の場合:
      視聴者がライブ配信に参加すると、livestream.joinイベントがトリガーされ、FWゲストIDも割り当てられます。そのゲストIDは保持されるため、次の場合を除き、サイト全体の動作を確認できます。
      1. 視聴者は、ライブ配信に参加してから (どちらのサイトでも) 購入するまでの間に Cookieをクリアすることを決定します。
      2. 視聴者が追跡されないことを要求しました。

      上記のシナリオは、FWピクセルからのものであっても、GTMタグからのものであっても、提供されるすべてのGMV属性に当てはまります。これらは業界の課題であり、現時点では回避策はありません。

      実装手順:

      1. タグマネージャー内からFirework Purchase Tracking Tagテンプレートを追加します。

        1. 私たちのタグは、Googleタグマネージャーコミュニティテンプレートギャラリーで入手できます。 Fireworkタグテンプレートを検索して追加するには、次の手順に従います。

          1. タグマネージャー内で、「テンプレート」をクリックします。

          2. [タグテンプレート] セクションで、[ギャラリーの検索] をクリックします。

          3. リストをフィルターするには、 をクリックして検索フィールドを開き、「Firework Purchase Tracking」と入力してFireworkテンプレートを表示します。

          4. 結果からFirework Purchase Tracking Tagテンプレートをクリックして詳細を表示します。

          5. テンプレートを追加するには、「ワークスペースに追加」をクリックします。

          6. 必要なテンプレート権限を確認し、「追加」をクリックします。

      2. Firework Purchase Trackingテンプレートを使用して新しいタグを追加し、トリガーを割り当てます。
        1. ワークスペースで、「タグ」をクリックします。
        2. テンプレートから新しいタグを作成します (Firework Purchase Tracking)。タグを追加するには、「新規」をクリックします。
        3. 必要に応じてタグに名前を付けます。
        4. トリガーを追加します。以下の例では、Googleタグマネージャーのデフォルトの既存トリガーである新しいタグをすべてのページに表示するように選択しています。さまざまなルールに基づいて独自のトリガーを作成することもできます。たとえば、特定のページでのみタグをトリガーしたり、ユーザーがページ上で一定の時間を過ごした後にタグをトリガーしたりできます。
          277123422-d6ec4971-b6ff-4537-9e41-4552adc868e8
        5. 「保存」をクリックします。
      3. Webサイトに公開する前に、プレビュー機能を使用して統合をテストし、実装を検証します。
        1. Googleタグマネージャーのプレビューモードを必ず有効にしてください。
          validate the implementation
        2. [タグマネージャーのプレビュー] パネルの [dataLayer] タブに移動します。
        3. Firework Purchase Event が dataLayerセクションに表示され、Object 型の変数として読み込まれていないことを確認します。これは、dataLayer内に個別のエントリとして存在する必要があります。
          purchase event
        4. Webサイトでテスト購入を行って、実装をテストします。
        5. Googleタグ マネージャーのプレビューパネルをチェックして、Firework Purchase Eventが正しくトリガーされ、データがdataLayerにキャプチャされていることを確認します。
      4. 新しいタグが意図したとおりに機能したら、公開します。現在のワークスペースを公開するには:
        1. 画面右上の「送信」をクリックします。 [変更の送信] 画面が表示され、コンテナーを公開し、コンテナーのバージョンを保存するオプションが表示されます。
        2. まだ選択されていない場合は、「公開してバージョンを作成」を選択します。
        3. 「ワークスペースの変更」セクションを参照して、構成が期待どおりに表示されるかどうかを確認してください。
        4. バージョン名とバージョンの説明を入力します。
        5. 「公開」をクリックします。
          publish new tag

      トラブルシューティング：

      テスト注文を行っても、Googleタグマネージャー内でdataLayerセクションが表示されない場合は、次の手順で修正してください。さらにトラブルシューティングを行うには、ブラウザの DevToolsまたはCharles Proxyなどの同様のツールを使用する必要があります。

      1. 購入スクリプト/GTM タグが起動される前に、Firework Purchase Tracking Libraryが https://asset.fwcdn3.com/js/analytics.jsからページに読み込まれたかどうかを確認してください。
        troubleshooting

      2. 購入を完了するときにネットワーク通話を確認してください。 200ステータスを返す https://p2.fwpixel.com/trk/user:purchaseへのメトリクス呼び出しが必要です。ペイロードは次のようになります。
        {

          "platform":"web",
          "product":"embed.web.naboo",
          "product_version":"v20231018.1-hotfix",
          "track_version":"2.0",
          "client_event_time":"2023-10-23T10:34:55.090",
          "os_name":"MacOS",
          "event_properties":{
            "locale":"en-US",
            "page_load_id":"90e4c277-5d99-4598-afbd-5371d5d38274",
            "page_url":"https://firework.com/firework-purchase-tracking.html",
            "session_count":39,
            "_last_channel_id":"1ePm6O",
            "_last_video_id":"gd3qDZ",
            "last_engaged_timestamp":"2023-10-17T17:46:28.265Z",
            "user_data":{
              "order_value":"35.54",
              "order_id":"23423",
              "currency":"CAD",
              "subtotal":"31.89",
              "country":"Canada"
            }
          },

          "session_id":"7f8f797a-fd7e-4523-8591-0d7a83081589",
          "session_type":"embed_session",
          "guest_id":"47ef059a-a99d-4d2c-80d1-7cfd5b396803",
          "visitor_id":"47ef059a-a99d-4d2c-80d1-7cfd5b396803"
        }

        devtool troubleshooting