PostHog 新手入门，一个用于帮助一流团队打造好产品的工具平台

发表于 2024/02/18

作者 jk2K

8 分钟阅读

前言

PostHog 可以自动追踪使用者在网站上的行为，帮助产研团队了解用户以及如何改进产品。他能做到自动捕获点击事件、鼠标运动轨迹，而无需前端工程师手动埋点推送事件。我以腾讯云对象存储为分析案例，来看看他的效果怎么样

站点接入

要想将网站接入 PostHog，需要在网站里添加一段 JavaScript 脚本，因为只是个人研究目的，所以我借助浏览器插件来实现我在 Chrome 浏览器上安装了 Tampermonkey 插件，然后注入网站接入脚本

  
// ==UserScript==
// @name         Tencent COS
// @namespace    http://tampermonkey.net/
// @version      2023-12-29
// @description  try to take over the world!
// @author       You
// @match        https://console.cloud.tencent.com/cos/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=jd.com
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // 创建一个新的 script 元素
    var script = document.createElement('script');
    // 设置 script 元素的 src 属性
    script.textContent = `
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('<密钥>',{api_host:'https://app.posthog.com'})

  fetch('https://console.cloud.tencent.com/cgi/login?action=checkLogin&t=1708350973774&uin=<腾讯云Uin>&ownerUin=0&csrfCode=492421633', {
    credentials: 'include' // 确保跨域请求时发送 Cookie
  })
  .then(response => {
    // 检查响应状态
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    //console.log(data); // 这里处理你的数据
    posthog.identify(
      data.data.userInfo.uin,
      { fullName: data.data.userInfo.displayName }
    );
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation: ', error);
  });
    `;
    // 将 script 元素添加到文档的 body 中
    document.body.appendChild(script);
})();