通过 Google Tag Manager 实现网页推送

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

集成

Firebase 凭据

在 Firebase Console 中，选择您的项目以获取 Firebase 服务器密钥 (Server Key) 和 发送者 ID (Sender ID)。请参考以下截图：

Pushwoosh 控制面板

前往 Pushwoosh 控制面板 并添加一个新应用。在打开的页面上，通过单击相应行中的 Configure 按钮来配置 Chrome 或 Firefox 平台。填写表单：

将 Firebase Console 中的 服务器密钥 (Server Key) 填入 API 密钥 (API key) 字段；
将 Firebase Console 中的 发送者 ID (Sender ID) 填入 FCM 发送者 ID (FCM Sender ID) 字段；
将您网站的确切地址填入 网站名称 (Website Name) 字段。

请务必复制新创建应用的应用代码 (Application Code)，稍后您将需要它。应用代码如下突出显示：

Google Tag Manager

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

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

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

推送订阅按钮

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

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

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