Google Analytics Api 使用

最近在做浏览器扩展《温故知新》的新版本。其中，最让我头疼的就是用 Google Analytics 统计信息了。

Google 官方提供的 SDK 使用的话，需要外部引入 SDK，并且配置 CSP，而 Firefox 浏览器不允许配置 CSP。

无奈，只能自己去写一个简单的封装了。

export class GA {
  constructor(ua, cid, debug = false) {
    this.ua = ua;
    this.cid = cid; // client id
    this.gaApi = debug ? 'https://www.google-analytics.com/debug/collect' : 'https://www.google-analytics.com/collect';
    this.version = '1';
  }
  ga(t, ...items) {
    let payload = `v=${this.version}&tid=${this.ua}&cid=${this.cid}`;
    let params = [];
    switch (t) {
      case 'pageview': // Pageview hit type
        // dh -- Document hostname
        // dp -- Page
        // dt -- Title
        params = ['dh', 'dp', 'dt'];
        break;
      case 'event':
        // ec -- Event Category. Required
        // ea -- Event Action. Required
        // el -- Event label.
        // ev -- Event value.
        params = ['ec', 'ea', 'el', 'ev'];
    }
    if (params === []) return;
    payload = `${payload}&t=${t}`;
    items.forEach((v, i) => {
      payload = `${payload}&${params[i]}=${encodeURIComponent(v)}`;
    });
    const request = new XMLHttpRequest();
    request.open('POST', this.gaApi, true);
    request.send(payload);
  }
}

const uid = 'xxxx-xxxx-xxx-xxx';
const debug = false;
const gaID = 'UA-xxxxxx-x';
const gaObj = new GA(gaID, uid, debug);
function sendEvent(eventCategory, eventAction, eventLabel = '', eventValue = 1) {
  if (store.getters.config.ga === false) return;
  gaObj.ga('event', eventCategory, eventAction, eventLabel, eventValue);
}
// dh -- Document hostname, dp -- Page, dt -- Title
function sendPageview(dp, dh = '', dt = '') {
  if (store.getters.config.ga === false) return;
  gaObj.ga('pageview', dh, dp, dt);
}

这就是我根据官方文档简单写的封装。

这里面需要注意几个问题。

一个是正式环境的地址是 /collect 而测试地址是 /debug/collect。这个在之前的时候，没有注意到还有测试地址，所以绕了弯路，也没有发现提交的参数错误。

另外一个就是在 event 类型中，Event value 必须是整型。

还有个小技巧，就是调试的时候，可以切换到“实时”选项卡，在那下面可以看到发送到 /collect 的实时数据。

ET碎碎念，每周一，晚六点一刻更新，欢迎订阅

欢迎使用 SteemEditor 来编写文章，获取 @steemeditor.bot 的点赞！

感谢你的阅读，我是中文区见证人之一，欢迎通过 SteemConnect 来给我投票，或者打开 https://steemitwallet.com/~witnesses 页面，输入 ety001 进行投票。

中文区的见证人目前有：
支持一下他们（按字母顺序），一人可以有30票：

• Hive account@abit ｜ 投票
• Hive account@bobdos ｜ 投票
• Hive account@ety001｜ 投票
• Hive account@justyy ｜投票
• Hive account@oflyhigh | 投票

Thank you for reading. I'm a witness. I would really appreciate your witness vote! You can vote by SteemConnect. Or open https://steemitwallet.com/~witnesses page, input ety001 to vote.