概要

このガイドでは、Google Tag Manager（GTM）を使用してSingular Web SDKを実装する方法を説明します。この方法は、ウェブサイトコードに直接アクセスできないチームや、GTMを通じてトラッキングを管理したい場合に最適です。

前提条件

開始前に、以下が用意されていることを確認してください：

• SDKキーとSDKシークレット: 
  • 確認方法：Singularアカウントにログインし、[Developer Tools] ＞ [SDK Integration] ＞ [SDK Keys] に移動してください。
• プロダクトID:
  • 概要:ウェブサイト固有の名前（理想的には逆DNS形式、例:com.website-name ）。
  • 重要性:このIDはウェブサイトをSingular内のアプリとして関連付け、Singularのアプリページに記載されているWebアプリのbundleIDと一致させる必要があります。 
• Google Tag Managerがサイトに設定済みであること。
• GTM内でウェブサイトのタグ、トリガー、変数を編集する権限が必要です。カスタマイズ内容によっては、カスタムタグ の作成方法やタグシーケンスの設定方法を知る必要がある場合があります。 
• Google Tag Manager への変更を公開する権限がない場合は、テスト後に誰かに変更を公開してもらうよう依頼する必要があります。
• GTM でのコンテナおよびタグのプレビューとデバッグの方法に関する知識。 
• 追跡したいイベントの一覧。アイデアについては、当社の「Singular標準イベント：完全リスト」および「業種別推奨イベント」をご覧ください。

実装手順

ステップ1: Singular Web TrackingテンプレートをGTMコンテナに追加

1. Google タグマネージャーアカウントにログインし、ウェブサイトのコンテナを選択します。
2. [タグ] > [新規] に移動します。
3. タグに「Singular Init Tag」という名前を付けます
4. タグ設定ボックスをクリックしてタグ設定を開始します。
5. タグの種類を選択: 「コミュニティテンプレートギャラリーでさらにタグの種類を探る」を選択します。
6. 「Singular」を検索し、「Singular Web Tracking」を選択します。「ワークスペースに追加」ボタンをクリックします。

ステップ2: SDKの初期化

1. 以下の内容でフォームフィールドを入力してください：
   • トラッキングタイプを「初期化」に設定
   • Api Keyフィールドに実際のSDKキーを入力
   • シークレット欄に実際のSDKシークレットを入力 実際のプロダクトIDを入力

   • 実際のプロダクトIDを入力してください。 例: com.website-name Singularプラットフォームの「Apps」ページにある BundleID 値と一致している必要があります。

     ヒント！テスト用に専用のプロダクトIDを使用してください com.website-name.dev 本番環境へプッシュする前に更新してください。 これにより、Singularレポートにおいてテストデータと本番アプリのデータが分離されます。

   • オプション:
     • ログレベル: SDKの デバッグ ログをコンソールに出力する設定 。デフォルトはなし。
     • イベント重複排除
     • グローバルプロパティの設定
     • スマートバナーの有効化（エンタープライズ版のみ）
     • カスタマーユーザーIDの設定
     • セッションタイムアウト: SDKが新規セッションを作成するまでの ユーザーの非アクティブ状態の最大時間 。 Singularはユーザーセッションを送信し、ユーザーリテンションの計算と 再エンゲージメントアトリビューションを有効化します。 デフォルト値は30分です。
     • クロスサブドメイントラッキング
2. トリガー設定を選択し、このタグを機能させるトリガーを設定します。
3. 「新規」を選択し、トリガー名を「Singular Init Trigger」と命名します。
4. トリガー設定をクリックし、「ページビュー - ウィンドウ読み込み」を選択 「保存」をクリック。
5. 再度「保存」をクリックしてタグを保存します。
6. タグページから「プレビュー」をクリックし、 Singular 初期化タグがトリガーされることをテストします。
   
   

ステップ3: イベントのトラッキング

SDKを初期化した後、ユーザーがウェブサイト上で重要なアクションを実行した際にカスタムイベントを追跡できます。

Basic EventConversion EventRevenue Event

基本イベント追跡

単純なイベントを追跡するか、有効なJSONを使用してカスタム属性を追加し、 イベントに関する詳細なコンテキストを提供します:

1. Singular Web Trackingテンプレートを使用して、カスタムイベント用の新しいタグを作成します。 イベントタグに名前を付けます。

2. イベントタグに名前を付けます。

3. [Track Type] = [Custom Event] を選択

4. 「イベント名」フィールドを調整するか、適切な変数を設定します。

5. 「カスタムユーザーID」フィールドを調整するか、適切な変数を設定します。

6. 必要に応じて「属性」を調整し、キー/値ペアを イベントに 渡します。

7. トリガーを設定し、タグが意図したタイミングで発火するようにします。

8. トリガーとタグを保存し、プレビューでテストします。

コンバージョンイベントの追跡

コンバージョンイベントの追跡:

1. Singular Web Trackingテンプレートを使用してカスタムイベント用の新規タグを作成します。 コンバージョンイベントタグに名前を付けます。

2. コンバージョンイベントタグに名前を付けます。

3. トラッキングタイプ = コンバージョンイベントを選択

4. 「イベント名」フィールドを調整するか、適切な変数を設定します。

5. 「カスタムユーザーID」フィールドを調整するか、適切な変数を設定します。

6. 必要に応じて「属性」を調整し、キー/値ペアを イベントに 渡します。

7. トリガーを設定し、タグが意図したタイミングで発火するようにします。

8. トリガーとタグを保存し、プレビューでテストします。

収益イベント追跡

収益情報を含むコンバージョンイベントを追跡し、 より詳細なコンテキストを得るためにオプションの属性を追加します：

1. Singular Web Trackingテンプレートを使用してカスタムイベント用の新規タグを作成します。 収益イベントタグに名前を付けます。

2. 収益イベントタグに名前を付けます。

3. トラッキングタイプ = 収益イベントを選択

4. 「イベント名」フィールドを調整するか、適切な変数を設定します。

5. 「カスタムユーザーID」フィールドを調整するか、適切な変数を設定します。

6. 「通貨」フィールドを調整するか、適切な変数を設定します。 収益通貨は3文字のISO 4217通貨コード（例：「USD」、「EUR」、「INR」）で渡してください。

7. 「収益」フィールドを調整するか、適切な変数を設定します。 収益は指定通貨で表す必要があります。

8. 必要に応じて「属性」を調整し、イベント上でキー/値ペアを渡します。

9. トリガーを設定し、期待されるタイミングでタグがトリガーされるようにします。

10. トリガーとタグを保存し、プレビューでテストしてください。

一般的なイベント実装パターン

ステップ4: カスタマーユーザーIDの設定

Singular SDKメソッドを使用して、内部ユーザーIDをSingularに送信できます。

ユーザーがログインせずにウェブサイト上でアクションを実行している間は、 Singularが生成したユーザーIDでイベントが送信されます。 ただしユーザーが登録またはログイン後は、 ウェブサイトで使用しているユーザーID（例：ハッシュ化されたメールアドレス）を Singularに送信できます。

SingularはユーザーIDを、ユーザーレベルデータエクスポート（アトリビューションログのエクスポート参照）および内部BIポストバック（設定済みの場合、内部BIポストバックの設定参照）で使用します。

ユーザーIDをSingularに送信する方法は2つあります：

• 推奨： ウェブサイト起動時にユーザーIDが判明している場合 、 SDK初期化時に 「Initialization」トラックタイプでユーザーIDを設定します。これにより、 最初のページ訪問時からユーザーIDがSingularに利用可能になります。
• 代替方法として、認証後など任意のタイミングで 「ログイン」トラックタイプのタグをトリガーできます。 ユーザーIDが利用可能になり次第、すぐに呼び出すことを推奨します。 注：このタグの呼び出しはイベントをトリガーしません。 今後発生するイベントトリガーに追加されるユーザーIDを設定するだけです！

SingularでユーザーIDを設定するには、 「ログイン」トラックタイプのSingularタグを追加します：

1. Google タグマネージャーアカウントで、[タグ] > [新規] をクリックします。
2. タグ設定ウィンドウで、 [タグ設定] をクリックし、[タグタイプ] メニューから「Singular Web Tracking」を選択します。
3. [トラックタイプ] で「ログイン」を選択します。
4. カスタムユーザーID欄に、ユーザーIDを含むGoogleタグマネージャー変数を入力します。
5. [トリガー設定]をクリックし、トリガーとなるイベントを追加します：ユーザー ログイン または登録。
6. [保存]をクリックします。

ユーザーIDの設定を解除するには、 「ログアウト」トラッキングタイプのタグを追加します：

1. Google タグマネージャーアカウントで、[タグ] > [新規] をクリックします。
2. [タグ設定]ウィンドウで[タグ設定]をクリックし、[タグタイプ]メニューから「単一ウェブトラッキング」を選択します。
3. [トラッキングタイプ] で「ログアウト」を選択します。
4. [トリガー設定]をクリックし、トリガーイベントを追加します：ユーザー ログアウト。
5. [保存]をクリックします。

ステップ5: イベント重複排除（任意）

Google Tag Manager でのイベント重複排除

GTMで重複が発生する理由

GTMは同一ユーザーアクションに対してタグを複数回評価・発火する可能性があります（例： トリガー条件の重複や複数イベントリスナー）。これにより Singularイベントエクスポートの重複が発生します。

GTM重複排除方法（推奨）

Singular SDKイベント重複排除：Singular Web SDKのGTMテンプレートで重複排除を有効化し、設定可能な時間枠内で同一の重複排除パラメータに一致する重複イベントを削除します。

実装手順

イベント重複排除の有効化:Singular Web SDK 初期化タグ/テンプレートで、 イベント重複排除オプションを有効にします。

時間枠の設定（オプション）：2つのイベントを重複と見なす最大時間枠（ミリ秒単位）を設定します（デフォルト：1000ms / 1秒）。

重複排除の仕組み

有効化時、SDKは以下のパラメータのハッシュ値を用いて、同一イベントが時間枠内で再度発生した場合にイベント（ページ訪問を除く）を抑制します：EventName,EventProductName,IsRevenueEvent,CustomUserId,GlobalProperties,MatchId,WebUrl （さらに収益やカスタム引数などのイベント「追加」ペイロード）。

ステップ6: GTM実装のテスト

1. GTMプレビューモードを開き、ウェブサイトを読み込みます。
2. 以下の点を確認してください：

• SDKが読み込まれる（singular-sdk.js へのネットワークリクエスト）
• イベントが期待通りにトリガーされ、アクションごとに1回のみ発生している
• singular に関連するブラウザコンソールのエラーがないこと
• sdk-api-v1.singular.net へのネットワークリクエストが送信されている

3. ブラウザ開発者ツールの「ネットワーク」タブで 適切なペイロードが送信されていることを確認

ステップ7: Web-to-Appフォワーディングの実装

Web-to-Appアトリビューション転送

Singular Web SDKを使用して、ウェブサイトからモバイルアプリへのユーザージャーニーを追跡し、 モバイルアプリインストールや 再エンゲージメントへの正確なウェブキャンペーンアトリビューションを実現します。 デスクトップユーザー向けのQRコードサポートを含む、Web-to-App転送の設定手順に従ってください。 当社の「Web-to-Mobile App Attribution Forwarding Guide」に従い、 モバイルウェブアトリビューション用のSingular Web SDKを設定してください。

1. モバイルウェブアトリビューション用にSingular Web SDKを設定するには、 「ウェブサイトからモバイルアプリへのアトリビューション転送ガイド」 に従ってください。
2. モバイルWebからアプリへのトラッキング設定:
   • アプリ起動タグを追加し、アプリを開く/インストールするボタンクリックをトリガーに設定します。

     1. Open Appタグの設定時には、 Singularの「リンク管理」ページから モバイルWeb→アプリのベースリンクを指定してください。

        

3. デスクトップWebからアプリへのトラッキングの場合：
   • QRコード生成用クリーンアップタグを作成
     1. GTMで[タグ] > [新規]に移動し、 [カスタムHTML]を選択します。
     2. コードを追加:
        • 選択したQRCodeライブラリをインジェクション
        • Web-to-Appリンクを取得 window.singularSdk.buildWebToAppLink(baselink);
        • 返されたリンクからQRコードを生成。
        • ページ上のQRコード画像を更新します。
     3. タグ名を設定:"Singular - QRコードジェネレーター (クリーンアップ)"
     4. トリガー不要：クリーンアップタグは メインタグからトリガーを継承
     5. Singular Initタグを設定：
        • タグ設定をクリック
        • 詳細設定 > タグシーケンスに移動
        • 「[Singular Init タグ] 発火後にクリーンアップタグを発火」にチェック
        • ドロップダウンからQRコードジェネレータタグを選択
        • タグを保存し、プレビューモードでテストしてください。

詳細トピック

Singularバナー

グローバルプロパティの追加

Track Type: setGlobalProperties
propertyKey: user_type
value: premium

Track Type: getGlobalProperties

Track Type: unsetGlobalProperty
propertyKey: user_type

Track Type: clearGlobalProperties

クロスサブドメイントラッキング

デフォルトでは、Singular Website SDKはSingularデバイスIDを生成し、 ブラウザストレージを使用してこれを永続化します。このストレージはサブドメイン間で共有できないため、 SDKは各サブドメインごとに新しいIDを生成することになります。

サブドメイン間でSingularデバイスIDを永続化したい場合は、 以下のいずれかの方法を使用できます：

GTM実装における一般的な問題点

ベストプラクティス

• GTMを整理整頓：タグとトリガーに明確な名前を付け、 その目的を文書化する
• 未使用またはレガシータグを定期的に監査する。
• 重複イベントのリスク低減のため、トリガー数を最小限に抑える。
• 変更後は、本番環境へ反映する前に必ずGTMのプレビューモードで徹底的にテストする。
• クッキーベースのトラッキング（クロスサブドメイントラッキング）を使用する場合、 プライバシーポリシーを それに応じて更新する。

関連記事

• ネイティブ JavaScript 実装ガイド
• Google タグマネージャー実装ガイド
• トラブルシューティングとベストプラクティス
• WebアトリビューションFAQ