메인 콘텐츠로 건너뛰기
이 가이드는 Google Tag Manager(GTM)를 사용하여 OneSignal을 웹사이트와 통합하는 방법을 설명합니다. OneSignal 서비스 워커 설정, 업데이트된 초기화 코드를 다루고 사용자 프로필 태그(속성)를 OneSignal로 전송하는 새로운 단계를 소개합니다.

​
OneSignal 앱 설정

웹 푸시 설정 문서를 따르세요. 메시지가 표시되면 아래 코드에서 교체할 App ID를 기록하세요.

​
OneSignal 초기화 코드 복사 및 업데이트

사이트에 코드 추가 단계에 도달하면 코드 복사를 클릭합니다.

OneSignal 대시보드에서 제공되는 코드를 복사합니다.

Google Tag Manager와 함께 작동하도록 코드를 다음과 같이 일부 조정해야 합니다: 
<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  // remove async
  OneSignalDeferred.push( function(OneSignal) {
    // remove await
    OneSignal.init({
      // replace with YOUR_APP_ID
      appId: "YOUR_APP_ID",
    })
    // Add event to track OneSignal initialization if desired
      .then(function() {
        dataLayer.push({ event: 'OneSignalInitialized' });
      }).catch(function(e) {
        console.error("OneSignal initialization failed:", e);
    });
  });
</script>

​
Google Tag Manager 설정

Google Tag Manager 계정에 로그인하고 OneSignal Init이라는 새 태그를 설정합니다. 태그 구성/태그 유형은 사용자 지정 HTML이어야 합니다. OneSignal 코드를 HTML 필드에 붙여넣습니다. 고급 설정 > 태그 실행 옵션 아래에서 페이지당 한 번을 선택합니다.
트리거링에서 초기화 - 모든 페이지를 선택합니다.
오른쪽 상단에서 저장을 클릭하여 태그를 저장합니다. 작업 공간으로 돌아가서 게시 또는 제출을 선택하여 변경 사항을 배포할 수 있습니다. OneSignal을 로드하려는 사이트의 모든 페이지에 컨테이너가 설치되어 있고 초기화 태그가 예상대로 실행되는지 확인합니다.
추가 설정 지원이 필요한 경우 Google Tag Manager 도움말을 참조하세요.

​
테스트

웹사이트를 방문하면 설정한 프롬프트 설정에 따라 푸시 알림을 구독하라는 메시지가 표시됩니다. 자세한 내용은 웹 권한 프롬프트를 참조하세요. OneSignal 대시보드 대상 > 구독을 확인하여 구독을 확인합니다. 구독을 찾아 테스트 구독으로 설정합니다. 그런 다음 메시지 > 새 푸시로 이동하여 자신에게 알림을 보냅니다.
문제가 발생하면 일반적인 해결 방법은 웹 푸시 문제 해결 가이드를 확인하세요.
다음 단계는 웹 푸시 튜토리얼을 방문하거나 다른 GTM 옵션은 아래를 계속하세요.

​
데이터 태그 추가

이 단계는 OneSignal.User.addTags 메서드를 사용하여 GTM에서 OneSignal로 사용자 지정 사용자 데이터 태그(속성)를 전송합니다. 다음 코드 스니펫을 사용하여 태그를 설정합니다. "TAG_1" 및 "VALUE_1"을 원하는 태그 키와 값으로 바꿉니다: 
<script>
window.OneSignalDeferred = window.OneSignalDeferred || [];
OneSignalDeferred.push(function(OneSignal) {
  OneSignal.User.addTags({
      "TAG_1": "VALUE_1"
  });
});
</script>
태그가 적절한 조건에서 실행되도록 하려면 다음을 결합하는 트리거 그룹을 구성합니다:
  • 트리거 1: OneSignalInitialized 이벤트에서 실행되는 사용자 지정 이벤트 트리거 (OneSignal이 초기화되었는지 확인).
  • 트리거 2: 사용하려는 추가 트리거 (예: 페이지 뷰 또는 사용자 지정 사용자 이벤트).
트리거 그룹을 생성하려면:
  1. GTM 작업 공간에서 트리거로 이동하여 새로 만들기를 클릭합니다.
  2. 트리거 유형으로 트리거 그룹을 선택합니다.
  3. 트리거 그룹의 이름을 지정합니다 (예: “OS Tag – Initialized & Custom Trigger”).
  4. 트리거 그룹 구성 아래에서 다음 트리거를 추가합니다:
    1. 사용자 지정 이벤트 트리거:
      1. 트리거 유형으로 사용자 지정 이벤트를 선택합니다.
      2. 이벤트 이름을 OneSignalInitialized로 설정합니다.
    2. 추가 트리거:
      1. 기준을 충족하는 트리거를 선택합니다 (예: 모든 페이지 또는 사용자 로그인 후와 같은 사용자 지정 트리거).
  5. 트리거 그룹을 저장합니다.
  1. GTM 작업 공간에서 새 태그를 클릭합니다.
  2. 태그 구성을 사용자 지정 HTML로 설정하고 5.1단계의 코드 스니펫을 붙여넣습니다.
  3. 고급 설정 > 태그 실행 옵션 아래에서 페이지당 한 번을 선택합니다 (필요에 따라 조정).
  4. 트리거링에서 5.2단계에서 생성한 트리거 그룹을 선택합니다.
  5. 태그를 저장합니다.

​
변경 사항 게시

새 태그와 트리거 그룹을 구성한 후 컨테이너를 게시하여 새로운 사용자 태깅 기능을 배포합니다.

​
문제 해결

GTM의 미리보기 및 디버그 모드를 사용하여 초기화 태그와 사용자 프로필 태깅 태그가 모두 올바르게 실행되는지 확인합니다. 브라우저 콘솔에서 OneSignal 관련 오류를 확인하고 OneSignal 대시보드에서 오류 알림을 검토합니다. DataLayer 이벤트: 분석 설정에서 추가 추적을 위해 예상대로 이벤트(예: OneSignalInitialized)가 dataLayer에 푸시되는지 확인합니다. 자세한 내용은 웹 SDK 문제 해결을 참조하세요.
이러한 업데이트를 통해 웹사이트는 이제 최신 OneSignal 초기화를 사용하고 OneSignal.User.addTags 메서드를 사용하여 GTM을 통해 사용자 지정 사용자 프로필 태그를 전송합니다.추가된 트리거 그룹은 OneSignal이 초기화된 후 선택한 조건이 충족될 때만 태그가 실행되도록 합니다.
추가 사용자 지정 또는 고급 추적에 대해서는 웹 SDK 참조 및 Google Tag Manager 문서를 참조하세요. 질문이 있거나 문제가 발생하면 웹 SDK 문제 해결을 참조하거나 OneSignal 지원팀에 문의하세요.