# 通过 Google Tag Manager 实现网页推送

无需任何编码，只需四个步骤即可实现推送通知！
Pushwoosh WebSDK Lite 可以通过 Google Tag Manager 添加到您的网站，使集成过程尽可能简单。

<Aside type="note">
#### 部分功能

请注意，在您网站的所有访问者中，只有使用 Chrome 或 Firefox 的用户才能订阅和接收推送通知。WebSDK Lite 对 Pushwoosh 功能的访问也有限，例如自定义 Tag、UserID 或事件触发的消息。有关详细信息，请联系我们的[支持团队](https://help.pushwoosh.com/hc/en-us/requests/new/)！
</Aside>

## 集成

### Firebase 凭据

在 [Firebase Console](https://console.firebase.google.com/project/_/settings/cloudmessaging/) 中，选择您的项目以获取 Firebase **服务器密钥 (Server Key)** 和 **发送者 ID (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 密钥 (API key)** 字段；
*   将 Firebase Console 中的 **发送者 ID (Sender ID)** 填入 **FCM 发送者 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 Tag Manager

**1.** 在 Google Tag Manager 中，选择一个容器或创建一个新容器。

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

**2.** 创建一个新 Tag，并在 Tag 配置中选择 **自定义 HTML (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.** 向下滚动到触发选项 (Triggering options) 并选择 **所有页面 (All Pages)**。

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

**6.** 单击“保存”。您的 Tag 已准备就绪！

### 推送订阅按钮

让用户通过推送订阅按钮订阅推送通知。要设置该按钮，只需通过 Google Tag Manager 添加以下脚本即可。

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

全部完成！现在您网站的访问者可以订阅和接收推送消息了。