Singular 웹사이트 SDK를 사용하면 웹사이트 활동을 마케팅 터치포인트에 어트리뷰션하고 웹사이트 내 사용자 이벤트를 추적할 수 있습니다. 또한 Singular의 크로스 디바이스 어트리뷰션 솔루션의 핵심 구성 요소로, 사용자 여정을 분석하고 크로스 플랫폼 LTV 및 ROAS를 계산할 수 있습니다.

자세한 내용은 크로스 디바이스 어트리뷰션 FAQ와 웹 어트리뷰션 FAQ를 참조하세요.

전제 조건

Singular 웹사이트 SDK를 연동하기 전에 다음 사전 요구 사항이 충족되는지 확인하세요:

• 사이트에Google 태그 관리자가 구성되어 있습니다.
• Singular로 보내려는 이벤트(전환 이벤트 및 모든 사용자 지정 이벤트)에 대해 필요에 따라 Google 태그 관리자 트리거를 설정했습니다.
• Singular로 보내려는 이벤트에 대해 필요에 따라 Google 태그 관리자 변수를 설정했습니다. 예를 들어, 거래 이벤트를 전송하고 거래 구매을 포함하려면 거래 금액과 통화에 대한 변수를 설정해야 합니다.

태그 1 - SDK 라이브러리 추가하기

Singular SDK가 초기화되거나 Singular 함수가 트리거되기 전에 사이트에 Singular 자바스크립트 라이브러리를 로드하거나 삽입해야 합니다. 이를 보장하기 위해 라이브러리는 Google 태그 관리자(GTM)의 사용자 지정 HTML 태그 옵션을 사용하여 삽입됩니다.

적절한 기능을 유지하려면 사이트의 모든 페이지에 라이브러리가 포함되어야 합니다. GTM의 창 로드됨 트리거를 사용하여 라이브러리 삽입 타이밍을 제어하여 페이지 콘텐츠가 완전히 로드된 후에 라이브러리가 로드되도록 할 것입니다.

• 사용자 지정 HTML 태그를 만들어 SDK 라이브러리를 로드하고 클라이언트 힌트 데이터를 가져올 수 있는 권한을 추가합니다.
• 태그 이름을"Singular - SDK 로더"로 지정합니다.
• 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>
  

• 고급 설정에서 태그 실행 우선 순위를 99로설정합니다.
• 트리거링 섹션에서"창 로드됨"에 대한 발동 트리거를 추가합니다.
• 태그 저장

태그 2 - SDK 초기화 태그

Singular SDK 초기화 코드는 페이지가 로드될 때마다 실행되어야 하지만 Singular - SDK 로더 태그가 실행된 후에만 실행되어야 합니다. 이를 보장하기 위해 Singular - SDK 로더 태그에서 생성된 데이터 레이어 이벤트를 트리거로 사용합니다.

모든 Singular 어트리뷰션 기능의 전제 조건은 Singular SDK 초기화입니다. 이는 두 가지 중요한 목적을 수행합니다:

• 사용자가 새 광고 데이터를 가지고 사이트에 들어올 때 또는 세션 시간 초과가 경과했을 때 새 사용자 세션을 생성합니다.
• Singular에 '페이지 방문' 이벤트를 전송합니다.

이러한 "페이지 방문" 이벤트와 사용자 세션은 사용자 리텐션을 계산하고 리인게이지먼트 어트리뷰션을 활성화하는 데 필수적입니다.

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


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

Singular에 사용자 ID 보내기(선택 사항)

Singular SDK 메서드를 사용하여 내부 사용자 ID를 Singular로 보낼 수 있습니다.

• 사용자 ID는 모든 식별자가 될 수 있으며 PII(개인 식별 정보)를 노출해서는 안 됩니다. 예를 들어, 사용자의 이메일 주소, 사용자 이름 또는 전화번호를 사용해서는 안 됩니다. Singular는 퍼스트 파티 데이터에만 고유한 해시값을 사용할 것을 권장합니다.
• 또한 Singular에 전달되는 사용자 ID 값은 모든 플랫폼(웹/모바일/PC/콘솔/오프라인)에서 캡처한 내부 사용자 ID와 동일해야 합니다.
• Singular는 사용자 수준 내보내기, ETL 및 내부 BI 포스트백(구성된 경우)에 사용자 ID를 포함합니다. 사용자 ID는 퍼스트 파티 데이터이며, Singular는 이를 다른 당사자와 공유하지 않습니다.
• Singular SDK 메서드로 설정한 사용자 ID 값은 logout() 메서드를 사용하여 설정 해제하거나 브라우저 로컬 저장소가 삭제될 때까지 유지됩니다. 웹사이트를 닫거나 새로고침해도 사용자 ID는 설정이 해제되지 않습니다.
• 비공개/시크릿 모드에서는 브라우저를 닫으면 로컬 저장소가 자동으로 삭제되므로 SDK가 사용자 ID를 유지할 수 없습니다.

사용자 ID를 설정하려면 login() 방법을 사용합니다. 설정을 해제하려면(예: 사용자가 계정에서 '로그아웃'하는 경우) logout() 메서드를 호출합니다.

웹사이트에서 Singular SDK를 초기화할 때 사용자 ID를 이미 알고 있는 경우 구성 개체에서 사용자 ID를 설정하세요. 이렇게 하면 Singular가 첫 번째 세션부터 사용자 ID를 가질 수 있습니다. 그러나 일반적으로 사용자가 등록하거나 로그인을 수행할 때까지 사용자 ID를 사용할 수 없습니다. 이 경우 등록 흐름이 완료된 후 login() 으로 호출하세요. 사용자가 인증 플로우를 수행할 때 데이터 레이어 이벤트를 푸시하는 것이 좋으며, 이 이벤트는 GTM 사용자 지정 이벤트 트리거와 함께 사용하여 Singular 로그인 기능을 실행하는 데 사용할 수 있습니다.

• 인증을 처리할 사용자 지정 HTML 태그 만들기
• 태그 이름을"Singular - 인증 태그"로 지정합니다.
• 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>
  

• 트리거링 섹션에서 사용자 지정 이벤트에 대한 발동 트리거를 추가합니다.
• 트리거의 이름을 지정합니다:"singularAuthentication"
• 사용자가 웹사이트에서 인증한 후 사용할 수 있는 데이터 레이어 이벤트 이름에 해당하는 트리거 이벤트 이름을 지정합니다.
• 태그 저장