如何添加推送通知分析

2024-01-01

我正在开发渐进式网络应用程序,我想实现推送通知的分析。

如何添加推送通知分析,以便我能够跟踪和记录有多少人点击了通知,以及有多少人在不点击通知的情况下关闭了该通知。


我编写了一小段代码来使用 Google Analytics 进行分析,并且效果相当好。

此处转储笔记:https://gauntface.com/blog/2016/05/01/push-debugging-analytics https://gauntface.com/blog/2016/05/01/push-debugging-analytics


我这样做的方法是上面提到的帖子:

在 Service Worker 中,我导入一个 javascript 文件来为我进行跟踪,设置分析 ID,然后在适当的事件中调用跟踪。寻找self.analytics.trackEvent:

importScripts('./scripts/analytics.js');

self.analytics.trackingId = 'UA-77119321-2';

self.addEventListener('push', function(event) {
  let notificationTitle = 'Hello';
  const notificationOptions = {
    body: 'Thanks for sending this push msg.',
    icon: './images/icon-192x192.png',
    tag: 'simple-push-demo-notification'
  };

  // Important to trigger analytics asynchronously with logic
  // to show notification
  event.waitUntil(
    Promise.all([
      self.analytics.trackEvent('push-received'),
      self.registration.showNotification('Hello', notificationOptions)
    ])
  );
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();

  // Important to trigger analytics asynchronously with logic
  // to do other work (i.e. open window)
  event.waitUntil(
    Promise.all([
      self.analytics.trackEvent('notification-click'),
      clients.openWindow('https://gauntface.github.io/simple-push-demo/')
    ])
  );
});

对 Google Analytics 测量协议进行实际跟踪调用的代码如下所示。 API 非常简单,因此有效负载数据是分析所期望的属性,我以 API 期望的格式生成这些参数的字符串,过滤掉空/空值:

class Analytics {
  trackEvent(eventAction, eventValue) {
    if (!this.trackingId) {
      console.error('You need to set a trackingId, for example:');
      console.error('self.analytics.trackingId = \'UA-XXXXXXXX-X\';');

      // We want this to be a safe method, so avoid throwing Unless
      // It's absolutely necessary.
      return Promise.resolve();
    }

    if (!eventAction && !eventValue) {
      console.warn('sendAnalyticsEvent() called with no eventAction or ' +
      'eventValue.');
      return Promise.resolve();
    }

    return self.registration.pushManager.getSubscription()
    .then(subscription => {
      if (subscription === null) {
        // The user has not subscribed yet.
        throw new Error('No subscription currently available.');
      }

      const payloadData = {
        // GA Version Number
        v: 1,
        // Client ID
        cid: subscription.endpoint,
        // Tracking ID
        tid: this.trackingId,
        // Hit Type
        t: 'event',
        // Data Source
        ds: 'serviceworker',
        // Event Category
        ec: 'serviceworker',
        // Event Action
        ea: eventAction,
        // Event Value
        ev: eventValue
      };

      const payloadString = Object.keys(payloadData)
      .filter(analyticsKey => {
        return payloadData[analyticsKey];
      })
      .map(analyticsKey => {
        return `${analyticsKey}=` +
          encodeURIComponent(payloadData[analyticsKey]);
      })
      .join('&');

      return fetch('https://www.google-analytics.com/collect', {
        method: 'post',
        body: payloadString
      });
    })
    .then(response => {
      if (!response.ok) {
        return response.text()
        .then(responseText => {
          throw new Error(
            `Bad response from Google Analytics ` +
            `[${response.status}] ${responseText}`);
        });
      }
    })
    .catch(err => {
      console.warn('Unable to send the analytics event', err);
    });
  }
}

if (typeof self !== 'undefined') {
  self.analytics = new Analytics();
}

您可以在以下位置找到所有这些内容:https://github.com/gauntface/simple-push-demo https://github.com/gauntface/simple-push-demo

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何添加推送通知分析 的相关文章

  • 如何在 JAX-RS 过滤器中记录请求处理时间

    我有 JAX RS Web 应用程序 我想记录从获取请求到响应的时间量 在 Spring Boot 中使用 servlet 过滤器很容易 但我的应用程序中的过滤器无法正常工作 Provider public class RequestLog
  • ANTLR 和 Eclipse(或任何像样的 IDE)

    我已经使用 ANTLRv3IDE 插件在 Eclipse 中使用 ANTLR 一段时间了 虽然它并不完美 而且有点过时 但它的工作相当不错 现在 我希望将我正在创建的另一个 DSL 切换到 ANTLRv4 然而 Eclipse 的支持似乎非
  • SubscriptionManager 用于读取运行 Android 5.1+ 的双 SIM 设备的 IMSI

    对于 API 22 我尝试使用 SubscriptionManager 读取双 SIM 卡 IMSI IMSI 是 14 到 15 个字符 格式如下 MCC MNC MSIN MCC 移动国家 地区代码 例如 美国为 310 MNC 移动网
  • Scrapy - 持续从数据库中获取要爬取的url

    我想不断地从数据库中获取要爬行的网址 到目前为止 我成功地从基地获取了 url 但我希望我的蜘蛛继续从该基地读取 因为该表将由另一个线程填充 我有一个管道 一旦爬行 工作 就会从表中删除 url 换句话说 我想使用我的数据库作为队列 我尝试
  • Nodejs 一个接一个地运行异步函数

    我是 JS nodejs 的新手 所以如果我不能提出切中要害的问题 请原谅我 所以基本上 如果我有两个异步函数 async function init async function main 如何确保在 init 完成其异步请求后调用 ma
  • 从 STL 列表中删除项目

    我想创建一个函数 如果符合特定条件 则将项目从一个 STL 列表移动到另一个列表 这段代码不是这样做的方法 迭代器很可能会被擦除 函数失效并导致问题 for std list
  • iPhone 中的 NSNotification

    我正在将 NSSNotifcation 发送到 iPhone 应用程序中的另一个视图控制器 但它的观察者方法收到两次通知 这可能如何 任何人都可以指导我 我已经使用此代码来发布通知 NSNotificationCenter defaultC
  • removeall 和removeif 的用例

    我找到了这个 fun main val list MutableList
  • 如何将tchar指针转换为char指针

    我想将 tchar 转换为 char 这可能吗 如果是的话该怎么做 我使用unicode设置 A TCHAR要么是一个普通的char or a wchar t取决于您的项目的设置 如果是后者 您需要使用WideCharToMultiByte
  • 在合并的单元格中选择、插入照片并将其居中

    我是一名研发面包师 正在为我的团队制作食谱模板 模板中有照片 但我需要轻松地允许他们单击一个按钮 打开照片的文件选择器 然后将该照片放在合并的单元格中 我其实不太擅长做这个 Sub InsertPhotoMacro Dim photoNam
  • 为什么 fork 炸弹没有使 android 崩溃?

    这是最简单的叉子炸弹 我在许多 Linux 发行版上执行了它 但它们都崩溃了 但是当我在 android 终端中执行此操作时 即使授予后也没有效果超级用户权限 有什么解释为什么它没有使 Android 系统崩溃吗 一句话 ulimit Li
  • 无法在 Python 2.4 中解码 unicode 字符串

    这是Python 2 4 中的 这是我的情况 我从数据库中提取一个字符串 它包含一个变音的 o xf6 此时 如果我运行 type value 它会返回 str 然后我尝试运行 decode utf 8 但收到错误 utf8 编解码器无法解
  • 如何在没有 Visual Studio 的情况下将新文件添加到 .csproj 文件

    如何添加新文件到 csproj从命令提示符 我认为没有任何工具可以响应命令行上的 add project 命令来执行此操作 但我认为您可以幸运地创建一个程序 脚本来直接操作 csproj 文件的 XML 内容 csproj 文件的结构如下所
  • 自定义字体显示在 IB 中,但不显示在模拟器中

    我已经设置了一个UITextView and a UILabel使用自定义字体 它是垂直镜像的蒙古文字体 但我还添加了英文文本 以便您可以看到效果 这些文字显示在 Interface Builder 中 但在模拟器中大部分字符都在UITex
  • Android:防止嗅探(例如使用 CharlesProxy)SSL 流量

    我使用 Charles 检查将我的应用程序发送到 HTTPS 的数据 我在手机上安装了 Charles CA 证书 因此我能够解密每个 SSL 流量 但我发现一些应用程序无法看到 SSL 流量 我如何将这种行为实现到我自己的应用程序中 有了
  • C# amo 获取角色完整

    我正在开发一个 SSAS 项目 其中除其他事项外 我需要获取 C 中表格多维数据集的完整用户列表 目前我让它以这样的方式工作 我可以获得角色 但数据不完整 当我调用 Server Database Roles 为了便于阅读而简化 属性并枚举
  • SQLite HAVING 比较错误

    我有一个测试 SQLite 表 用于存储带有值的报告数据 CREATE TABLE IF NOT EXISTS test fact daily revenue date TEXT revenue NUMERIC product TEXT I
  • AWS SES模板html部分是多行

    我正在使用 AWS SES 按照文档发送电子邮件https docs aws amazon com ses latest DeveloperGuide send personalized email api html https docs
  • 允许使用 SurfaceTexture 在 GLSurfaceView 渲染器中进行多通道渲染

    我正在显示视频GLSurfaceView使用需要连续应用多个着色器的自定义渲染器 目前 它可以成功地使用一个着色器 但我不确定如何扩展渲染管道以连续应用多个着色器 我知道有一些关于应用多个着色器的示例 使用FrameBuffers and
  • 使用 nginx 在云上部署 django 和 React

    我有一个 digitalocean 服务器 并且已经使用 Gunicorn 和 nginx 部署了 Django 后端服务器 如何在同一台服务器上部署 React 应用程序 您可以构建 React 应用程序并使用 Nginx 提供其静态文件

随机推荐