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

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

<Aside type="note">
#### 부분적인 기능

웹사이트의 모든 방문자 중 Chrome 또는 Firefox를 사용하는 방문자만 푸시 알림을 구독하고 수신할 수 있다는 점에 유의하세요. 또한 WebSDK Lite는 사용자 지정 태그, UserID 또는 이벤트 기반 메시징과 같은 Pushwoosh 기능에 대한 접근이 제한됩니다. 자세한 내용은 [지원팀](https://help.pushwoosh.com/hc/en-us/requests/new/)에 문의하세요!
</Aside>

## 통합

### Firebase 자격 증명

[Firebase Console](https://console.firebase.google.com/project/_/settings/cloudmessaging/)에서 프로젝트를 선택하여 Firebase **Server Key**와 **Sender ID**를 얻으세요. 아래 스크린샷을 참조하세요:

<img src="/web-push-notifications-web-push-via-google-tag-manager-1.webp" alt=""/>

### Pushwoosh 제어판

Pushwoosh [**제어판**](https://go.pushwoosh.com/v2/applications)으로 이동하여 새 앱을 추가하세요. 열린 페이지에서 해당 행의 **Configure** 버튼을 클릭하여 Chrome 또는 Firefox 플랫폼을 구성하세요. 양식을 작성하세요:

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

<img src="/web-push-notifications-web-push-via-google-tag-manager-2.webp" alt=""/>

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

<img src="/web-push-notifications-web-push-via-google-tag-manager-3.webp" alt=""/>

### Google 태그 관리자

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

<img src="/web-push-notifications-web-push-via-google-tag-manager-4.webp" alt=""/>

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

<img src="/web-push-notifications-web-push-via-google-tag-manager-5.webp" alt=""/>

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

```txt
<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로 변경합니다.

<img src="/web-push-notifications-web-push-via-google-tag-manager-6.webp" alt=""/>

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

<img src="/web-push-notifications-web-push-via-google-tag-manager-7.webp" alt=""/>

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

### 푸시 구독 버튼

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

```txt
<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>
```

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