谷歌分析 Google Analytics

image.png

本文主要描述点击事件。

一. 注册Gmail邮箱

地址如下：https://marketingplatform.google.com/about/analytics/

二. 创建账号

进入页面点击管理 -> 创建账号

image.png

三. 创建媒体资源

点击创建媒体资源

image.png
选择资源类型

image.png
输入资源信息

image.png
创建成功后，可在这里查看已创建的媒体资源，点击勾可确认切换资源

image.png

四. 在网站安装谷歌分析代码

1. ga.js

ga设置事件发送方式如下：
基本写法：

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue]);

在上方有提到的「事件类别、事件动作、事件标签、事件价值」就是在这里依序进行填入。以前面提到的导览列点击事件来说，填入内容后的代码就会是：

ga('send', 'event', 'Click', 'Nav Click', '网站分析/GA教程', 500);

详细如下图：

image.png

代码如下：

 <script>
// Google Analytics（分析）插件
    // 初始化全局函数 ga（称为 ga() 命令队列），您可以通过该函数安排相关命令，使之在 analytics.js 库加载完毕可供使用时立即执行。
    (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
    (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
    m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); // 创建 <script> 元素，该元素开始从 https://www.google-analytics.com/analytics.js 异步下载 analytics.js JavaScript 库。
    // wptest
    // ga('create', 'UA-99206817-1', 'auto'); // 为通过 'GA_MEASUREMENT_ID' 参数指定的媒体资源创建新的跟踪器对象
    // wpdev
    ga('create', 'UA-164631151-2', 'auto'); // 为通过 'GA_MEASUREMENT_ID' 参数指定的媒体资源创建新的跟踪器对象
    ga('send', 'pageview');

    ga('send', 'event', 'searchCoupon', 'Click', 'search', 500 );
    // let gaSendObj = {
          //   eventCategory: 'Click',
          //   eventAction: events[0],
          //   eventLabel: events[1],
          //   eventValue: events[2] || 0
          // }
         
          // ga('send', 'event', gaSendObj);

    try {
      (function (w, d, s, l, i) {
        w[l] = w[l] || []; w[l].push({
          'gtm.start':
            new Date().getTime(), event: 'gtm.js'
        }); var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
      // })(window, document, 'script', 'dataLayer', 'GTM-PXZQ8S8');
      })(window, document, 'script', 'dataLayer', 'GTM-FVT3CXP');
    } catch (e) { console.log("google." + e); }
 </script>
<!-- Google Tag Manager (noscript) -->
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PXZQ8S8" height="0" width="0"
    style="display:none;visibility:hidden">
  </iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

2. gtag.js

代码需要在网站的每个用户可以访问的页面出现。并且添加到 gtag.js之间。

image.png

我在项目中把分析代码放在index.htmly页面

image.png

代码如下：

 <script async src="https://www.googletagmanager.com/gtag/js?id=跟踪 ID"</script>
<script>
 // Global site tag (gtag.js) - Google Analytics
    window.dataLayer = window.dataLayer || [];
    function gtag() { 
      dataLayer.push(arguments);
      console.log('调用gtag')
    }
    gtag('js', new Date());

    gtag('config', '跟踪 ID');

    gtag('event', 'login', {'method': 'Google'});  // 向谷歌分析发送数据
</script>

五. 测试是否安装成功

安装Google Analytics Debugger插件，安装办法如下：
- 打开谷歌浏览器，输入 chrome://extensions/，或者点击右侧三点 -> 更多工具 -> 拓展程序
- 搜索Google Analytics Debugger，安装
安装成功后，像谷歌分析发送数据时，发送成功时控制台如下：

image.png

发送不成功时如下：

image.png

六. 产品经理提供埋点数据信息

列出表格如下：

image.png

事件类别：鼠标点击、移入移除等事件，用来分类的，名字最好是能与JavaScript的事件名称保持一致
事件动作：用来分类的，名字规范、不重复，尽量语义化
事件标签：用来分类的，名字规范即可
事件价值：该事件在系统中所占的权重，用来数据分析

七. 按钮埋点

自定义dom元素属性，如：

<button data-ga-event="SearchCoupon/search/500" class="iconfont icon-search myCouponBtn" (click)="submit()"></button>

监听页面自定义属性的点击事件，发送给谷歌分析后台：

// 监听点击事件
    $(function () {
      try {
        // 添加data-ga-event属性点击事件
        $(document).on('click', "[data-ga-event]", function (e) {
          console.log('==========1', $(this).data("ga-event"));
          // ga-event属性字符串转数组
          let $self = $(this);
          const events = $self.data("ga-event").split('/');
          // if (events.length !== 3) {
          //   return true
          // }

          // gtag('event', events[0], {//第二个参数为事件动作
          //   'event_category': 'Click',//该字符串为事件类别
          //   'event_label': events[1], //签
          //   'value': events[2],//事件价值
          // })

          // ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue]);
          // 「事件类别、事件动作、事件标签、事件价值」
          // ga('send', 'event', 'Click', events[0], events[1], events[2]);
          let gaSendObj = {
            eventCategory: 'Click',
            eventAction: events[0],
            eventLabel: events[1],
            eventValue: events[2] || 0
          }
         
          ga('send', 'event', gaSendObj);
        });
      } catch (err) {
        window.console && console.log(err);
      }
    })

查看是否设置自定义属性或者监听成功，需要点击该按钮，查看控制台是否打印了console内的内容

六. 在后台看到点击情况

image.png

以下文章可以参考：

使用跟踪代码管理器部署 Google Analytics（分析）：https://support.google.com/tagmanager/answer/6107124?visit_id=637014553299624343-3086627037&rd=1
使用 gtag.js 的 Google Analytics（分析）事件https://support.google.com/analytics/answer/7476831
谷歌分析配置行为事件：https://www.cnblogs.com/zs-note/p/11365525.html
GA谷歌分析使用教程:认识GA内的事件（Event）：https://www.laowangboke.com/article/268.html