Singular Website SDKを使用すると、ウェブサイトのアクティビティをマーケティングタッチポイントに帰属させ、ウェブサイト内のユーザーイベントを追跡することができます。また、Singularのクロスデバイスアトリビューションソリューションの重要なコンポーネントでもあり、ユーザージャーニーを分析し、クロスプラットフォームのLTVとROASを計算することができます。

詳しくは、クロスデバイスアトリビューションFAQと ウェブアトリビューションFAQをご覧ください。

前提条件

Singular Website SDKを統合する前に、以下の前提条件が満たされていることを確認してください：

• Google Tag Managerがサイトに設定されている。
• Singularに送信したいイベント（コンバージョンイベントとカスタムイベント）に対して、必要に応じてGoogle Tag Managerトリガーを設定している。
• Singularに送信したいイベントに対して、必要に応じてGoogleタグマネージャーの変数を設定しました。例えば、トランザクションイベントを送信し、トランザクションの収益を含めたい場合は、トランザクションの合計と通貨の変数を設定する必要があります。

タグ 1 - SDK ライブラリの追加

Singular SDKが初期化されたり、Singularの関数がトリガーされたりする前に、Singular JavaScriptライブラリをサイトにロードまたはインジェクトする必要があります。これを確実にするために、Google Tag Manager (GTM)のカスタムHTMLタグオプションを使ってライブラリを注入します。

適切な機能を維持するために、ライブラリはサイトのすべてのページに含める必要があります。GTM の Window Loaded トリガーを使ってライブラリ注入のタイミングを制御し、ページのコンテンツが完全にロードされた後にライブラリがロードされるようにします。

• SDKライブラリをロードするカスタムHTMLタグを作成し、クライアントのヒントデータを取得する権限を追加します。
• タグ名を"Singular - SDK Loader"とします。
• HTMLウィンドウに以下のコードを挿入します。

  <script>
  (function() {
    // Check if singularSdk is already loaded
  
  
    if (window.singularSdk) {
      return; // SDK already loaded, no need to load again
  
  
    }
  
    // Inject the meta tag for client hints delegation
  
  
    var metaTag = document.createElement('meta');
    metaTag.setAttribute('http-equiv', 'delegate-ch');
    metaTag.setAttribute('content', 'sec-ch-ua-model https://sdk-api-v1.singular.net; sec-ch-ua-platform-version https://sdk-api-v1.singular.net; sec-ch-ua-full-version-list https://sdk-api-v1.singular.net');
    document.head.appendChild(metaTag);
    
    // Create and load the Singular SDK script
  
  
    var script = document.createElement('script');
    script.src = 'https://web-sdk-cdn.singular.net/singular-sdk/latest/singular-sdk.js';
    script.async = true;
  
    // Once the script is loaded, push to dataLayer
  
  
    script.addEventListener('load', function() {
      window.dataLayer = window.dataLayer || [];  // Ensure dataLayer is initialized
  
  
      window.dataLayer.push({
        event: 'singularSDKLibraryLoaded'
      });
    });
  
    // Append the script tag to the head of the document
  
  
    document.head.appendChild(script);
  })();
  </script>
  

• 詳細設定]で、[Tag firing priority]を99に設定します。
• Triggering]セクションで、"Window Loaded"トリガーを追加します。
• タグを保存します。

タグ2 - SDK初期化タグ

Singular SDKの初期化コードはページがロードされるたびに実行されなければなりませんが、Singular - SDK Loaderタグが実行された後でなければなりません。これを確実にするために、Singular - SDK Loaderタグによって作成されたData Layerイベントをトリガーとして使用します。

Singular SDKの初期化はすべてのSingularアトリビューション機能の前提条件です。これには2つの重要な目的があります：

• ユーザーが新しい広告データでサイトに入ったとき、またはセッションタイムアウトが経過したときに、新しいユーザーセッションを作成すること。
• ページ訪問」イベントをSingularに送信すること。

これらの「ページ訪問」イベントとユーザーセッションは、ユーザーリテンションを計算し、リエンゲージメントアトリビューションを可能にするために不可欠です。

// Configure the SDK to pass the user ID to Singular


const config = new SingularConfig(sdkKey, sdkSecret, productId)
    .withCustomUserId(userId);

ユーザーIDをSingularに送信する（オプション）

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

• ユーザーIDはどのような識別子でもかまいませんが、PII（個人を特定できる情報）を公開すべきではありません。例えば、ユーザーのメールアドレス、ユーザー名、電話番号は使用しないでください。Singularは、お客様のファーストパーティデータにのみユニークなハッシュ値を使用することを推奨します。
• Singularに渡すユーザーIDは、すべてのプラットフォーム（ウェブ/モバイル/PC/コンソール/オフライン）で同じ内部ユーザーIDを使用する必要があります。
• Singularはユーザーレベルのエクスポート、ETL、内部BIポストバック（設定されている場合）にユーザーIDを含めます。ユーザーIDはファーストパーティデータであり、Singularが他者と共有することはありません。
• ユーザーIDの値は、Singular SDKメソッドで設定されると、logout() メソッドで設定が解除されるまで、またはブラウザのローカルストレージが削除されるまで保持されます。ウェブサイトを閉じたり更新しても、ユーザーIDは解除されません。
• プライベート/インコグニートモードでは、ブラウザが閉じられるとローカルストレージが自動的に削除されるため、SDKはユーザーIDを永続化できません。

ユーザーIDを設定するには、login() メソッドを使用します。設定を解除するには（ユーザーがアカウントを「ログアウト」した場合など）、logout() メソッドを呼び出します。

ウェブサイト上でSingular SDKが初期化されたときにすでにユーザーIDがわかっている場合は、設定オブジェクトにユーザーIDを設定します。こうすることで、Singularは最初のセッションからユーザーIDを持つことができます。しかし、ユーザーIDは通常、ユーザーが登録するかログインを実行するまで使用できません。その場合、登録フローが完了した後にlogin() 。ユーザが認証フローを実行したときにdatalayerイベントをプッシュすることを推奨します。

• 認証を処理するカスタム HTML タグを作成します。
• タグ名を"Singular - Authentication Tag" とします。
• 以下のコードを HTML ウィンドウに挿入します。

  <script>
  (function() {
    // Ensure sessionStorage is available
  
  
    if (typeof sessionStorage === 'undefined') {
      console.warn('sessionStorage is not supported in this environment.');
      return;
    }
  
    // Check if the event has already been triggered in this session
  
  
    if (sessionStorage.getItem('sng_login_triggered')) {
      console.log('Singular SDK event already triggered this session.');
      return; // Exit if the event was triggered before in this session
  
  
    }
  
    // Check if singularSdk is available and initialized
  
  
    if (window.singularSdk && typeof singularSdk.login === 'function' && typeof singularSdk.event === 'function') {
      
      // Dynamically fetch UserID if available (replace with actual method if applicable)
  
  
      var userID = window.userID || "User123456789"; // Example fallback value for userID
  
  
  
      try {
        // After Authentication, Pass the UserID as the Singular Custom User ID Value
  
  
        singularSdk.login(userID);
  
        // Send the Registration_Completed event (or similar event)
  
  
        singularSdk.event("sng_login");
  
        // Set a flag in sessionStorage to indicate that the event was triggered
  
  
        sessionStorage.setItem('sng_login_triggered', 'true');
  
        console.log('Singular SDK event triggered successfully.');
      } catch (error) {
        console.error('Error triggering Singular SDK event:', error);
      }
    } else {
      console.warn('Singular SDK is not loaded or required methods are unavailable.');
    }
  })();
  </script>
  

• Triggering セクションの下に、カスタムイベント用の Firing Trigger を追加します。
• トリガーの名前を"singularAuthentication"
• ユーザがウェブサイト上で認証した後に利用可能なデータレイヤーのイベント名に対応するトリガー・イベント名を指定します。
• タグを保存する