Google 태그 관리자를 통한 웹 푸시

코딩 없이 4단계만으로 푸시 알림을 구현하세요! Pushwoosh WebSDK Lite는 Google 태그 관리자를 통해 웹사이트에 추가할 수 있어 통합 과정을 최대한 쉽게 만들어 줍니다.

통합

Firebase 자격 증명

Firebase Console에서 프로젝트를 선택하여 Firebase Server Key와 Sender ID를 얻으세요. 아래 스크린샷을 참조하세요:

Pushwoosh 제어판

Pushwoosh 제어판으로 이동하여 새 앱을 추가하세요. 열린 페이지에서 해당 행의 Configure 버튼을 클릭하여 Chrome 또는 Firefox 플랫폼을 구성하세요. 양식을 작성하세요:

Firebase Console의 Server Key를 API key 필드에 입력합니다.
Firebase Console의 Sender ID를 FCM Sender ID 필드에 입력합니다.
웹사이트의 정확한 주소를 Website Name 필드에 입력합니다.

새로 생성된 앱의 Application Code를 복사해 두세요. 나중에 필요합니다. 앱 코드는 아래에 강조 표시되어 있습니다:

Google 태그 관리자

1. Google 태그 관리자에서 컨테이너를 선택하거나 새로 만듭니다.

2. 새 태그를 만들고 태그 구성에서 Custom HTML을 선택합니다.

3. 아래 스크립트를 복사하여 HTML 필드에 붙여넣습니다.

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush-lite/v1/pushwoosh-web-notifications-lite.js?pw_application_code=#####-#####" async></script>

4. 스크립트의 숫자 기호 #####-#####(아래 그림에서 강조 표시됨)를 2단계에서 얻은 Pushwoosh Application Code로 변경합니다.

5. 트리거 옵션으로 스크롤을 내려 All Pages를 선택합니다.

6. “저장”을 클릭합니다. 태그가 준비되었습니다!

푸시 구독 버튼

푸시 구독 버튼을 사용하여 사용자가 푸시 알림을 구독하도록 하세요. 버튼을 설정하려면 Google 태그 관리자를 통해 다음 스크립트를 추가하기만 하면 됩니다.

<div style="text-align:center;margin:90px 0;">
  <button style="color:#000000;background: none;font-size: 16px;cursor: pointer;font-weight: 700;padding:0 60px;line-height: 60px;border:3px solid #000000;" type="button" name="button" onclick="window.pushwooshLite.instance.showSubscriptionWindow()">Subscribe Now</button>
</div>

모두 완료되었습니다! 이제 웹사이트 방문자들이 푸시 메시지를 구독하고 수신할 수 있습니다.