基于日志服务的GrowthHacking(1):数据埋点和采集(APP、Web、邮件、短信、二维码埋点技术)

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: 数据质量决定运营分析的质量 在上文中,我们介绍了GrowthHacking的整体架构,其中数据采集是整个数据分析的基础,只有有了数据,才能进行有价值的分析;只有高质量的数据,才能驱动高质量的运营分析.可以说,数据质量决定了运营质量。

基于日志服务的GrowthHacking(1):数据埋点和采集(APP、Web、邮件、短信埋点技术)

数据质量决定运营分析的质量

在上文中,我们介绍了GrowthHacking的整体架构,其中数据采集是整个数据分析的基础,只有有了数据,才能进行有价值的分析;只有高质量的数据,才能驱动高质量的运营分析.可以说,数据质量决定了运营质量。

在实际生产中,我们常常面临数据采集的痛点:

  1. 数据分散在各处,有服务器日志,有前端日志,有APP日志。
  2. 各种端的日志,采集方式迥异,要投入大量研发资源,才能覆盖所有的平台。
  3. 收集、处理、清洗、标注数据,需要投入巨大的精力,80%的精力浪费在了这些前置步骤上。
  4. 不同端的数据格式千奇百怪,缺乏一种统一的数据规范。

从分析需求推演数据源

通常,我们要分析拉新的的转化率,产品的留存率,以及用户推荐和最终付费相关的所有指标,每种类型的指标对应的渠道如下图所示。

image.png

以拉新为例, 通常我们可选择的渠道有社交媒体(微信、微博), 线上推送(邮件、短信),内容营销(博客、微信公众号),广告(广告联盟),线下推广(二维码)。每一种渠道的表现如何,需要用数据证明。每一种渠道的数据采集方式各不相同。接下来将逐个介绍。

埋点规范

杂乱无章的数据,价值等于0!如果各个渠道的数据各不相同,那么我们在分析时,就有很大一部分精力浪费在整理数据上。为了保证数据的质量,我们需要制定出一份埋点的协议,保证在采集数据时,能够采集到完整的信息。

image.png

在日志采集中,一般包含两部分信息:事件和属性。下文以Web埋点为例,详细介绍web埋点包含的内容。

Web埋点

web埋点可用于在博客前端追踪用户的访问情况。

Web埋点规范

  • 属性信息:

    • 设备信息:

      1. DeviceId:设备标识。 在首次加载js时,在cookie中添加唯一id。
      2. 屏幕长宽
      3. 设备类别。
    • 用户信息:

      1. uid:用户id,用户唯一标识。
      2. session id:会话id,一次会话定义为连续的操作。
      3. 首次登陆时间。
      4. 会话开始时间。
    • 软件信息:

      1. 语言
      2. os
      3. user agent
      4. 网站title
      5. 网站host
      6. 网站网址

Web埋点技术:

日志服务提供了Web Tracking技术,可以直接在网页上嵌入一个一个透明图片,当网页发生曝光时,会自动发送日志到日志服务。

埋点样例:

![](https://yunlei-statics.cn-hangzhou.log.aliyuncs.com/logstores/blog-tracking/track_ua.gif?APIVersion=0.6.0&blog=${标题名称}&src=yunqi&author=${author})

Web Tracking 本质上是一个http GET请求,不仅可以用来采集曝光时间,还可以用来采集一些事件信息。通过在前端嵌入js sdk的方式,通过js采集用户的行为动作,并且通过js sdk发送到日志服务。

嵌入js sdk的样例:

<script type="text/javascript" src="loghub-tracking.js" async></script>

采集事件样例:

var logger = new window.Tracker('${host}','${project}','${logstore}');
logger.push('customer', 'zhangsan');
logger.push('product', 'iphone 6s');
logger.push('price', 5500);
logger.logger(); //发送日志
logger.push('customer', 'lisi');
logger.push('product', 'ipod');
logger.push('price', 3000);
logger.logger();

iOS埋点

开发者可在iOS应用中,嵌入日志服务的iOS SDK,自由灵活的采集所需要的事件日志, SDK分为Swift和Objective-C版本。

Android埋点

Android SDK 类似于iOS SDK ,可以嵌入Android APP中,采集事件信息。

小程序埋点

在小程序中,可以参考Web的采集方式,嵌入js sdk,通过js事件采集内容,并且通过js sdk把数据发送到日志服务。

<script type="text/javascript" src="loghub-tracking.js" async></script>

邮件打开率和转化率埋点

邮件打开率

参考web tracking技术,在邮件的html内容中,添加一个img标签,该img标签是一个1X1的空白图片,用户看不到该图片。当邮件被打开时,会自动发送一条日志到日志服务:

<img src="https://yunlei-statics.cn-hangzhou.log.aliyuncs.com/logstores/blog-tracking/track_ua.gif?APIVersion=0.6.0&title=${邮件标题}&src=yunqi&author=${author})">

当日志采集到日志服务端后,可以参考本系列的分析文章,进行分析。

邮件转化率

运营同学可能在邮件中嵌入了一些链接,邀请用户注册、登录、访问某个功能。为了追踪用户是否打开了这个链接,我们需要在web tracking上封装一层。把真实的链接B封装起来,先跳转到A,在A记录下日志后,再跳转到真实地址B。

image.png

例如一下案例:

  1. 在邮件中,我们需要跳转到https://promotion.aliyun.com/ntms/act/logdoclist.html
  2. 把上述链接url encode编码:https%3a%2f%2fpromotion.aliyun.com%2fntms%2fact%2flogdoclist.html。
  3. 通过中间服务器跳转,把上述编码的url,作为redirect参数传递:http://47.96.36.117/go.php?redirect=https%3a%2f%2fpromotion.aliyun.com%2fntms%2fact%2flogdoclist.html
  4. 在中间服务器上,调用web tracking,记录日志到日志服务,同时返回302跳转到真实的链接。

通过以上方式记录的跳转日志,可以分析营销邮件的转化率。

短信营销埋点

短信营销类似于邮件营销,在短信中,嵌入链接,追踪链接的打开率。短信相比于邮件特殊的地方在于,短信有字数限制,因此需要在短信中使用短域名,那么整体架构变成了这样:

image.png

在这个方案中,真实的链接经过三次跳转,第一次跳转到短域名服务器,第二次跳转到中间服务器,在中间服务器上记录日志,第三次跳转到真实的目标地址。

二维码扫描率追踪

二维码是线下营销的利器,通过扫描二维码可以快速转化。二维码本质上是一串文字的编码,通常是一个url,因此我们可以采用类似邮件追踪的办法,把真实的url进行编码,经过中间服务器的跳转,记录下来二维码的扫描次数。

image.png

中间链接http://47.96.36.117/go.php?redirect=https%3a%2f%2fpromotion.aliyun.com%2fntms%2fact%2flogdoclist.html生成的二维码:

image.png

真实链接生成的二维码:

image.png

上述两个二维码的目标地址是一致的,但第一个二维码给我们机会,能够记录下来用户扫码的记录,无疑可以帮助我们判断运营活动的效果。

总结

本文介绍了常见的渠道的埋点技术,每一种渠道的数据分析,请关注本系列文章。

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
25天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
2月前
|
前端开发 数据库 UED
构建高性能Web应用的关键技术
本文将介绍构建高性能Web应用的关键技术,包括前端优化、后端优化、数据库优化等方面。通过深入讨论各项技术的原理和实践方法,帮助开发者们提升Web应用的响应速度和用户体验。
|
2天前
|
存储 前端开发 安全
13:会话跟踪技术Session的深度应用与实践-Java Web
13:会话跟踪技术Session的深度应用与实践-Java Web
13 3
|
2天前
|
存储 前端开发 搜索推荐
12:会话跟踪技术Cookie的深度应用与实践-Java Web
12:会话跟踪技术Cookie的深度应用与实践-Java Web
13 4
|
3天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
3天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
3天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
3天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
3天前
|
移动开发 JavaScript 前端开发
【JavaScript技术专栏】Web Worker在JavaScript中的应用
【4月更文挑战第30天】HTML5的Web Worker API解决了JavaScript单线程性能瓶颈问题,允许在后台线程运行JS代码。本文介绍了Web Worker的基本概念、类型、用法和应用场景,如复杂计算、图像处理和数据同步。通过实例展示了搜索建议、游戏开发和实时数据分析等应用,并提醒注意其无法直接访问DOM、需消息传递通信以及移动端资源管理。Web Worker为前端开发提供了多线程能力,提升了Web应用性能和用户体验。
|
4天前
|
缓存 前端开发 JavaScript

相关产品

  • 日志服务