• 加入Google Analytics、Google Tag Manager QQ群一起交流谷歌分析小站—总群
  • 加入Adobe Analytics、Adobe Launch交流群,加入请附上Adobe的组织ID,没有请勿加Adobe Analytics交流群
  • Google Analytics和Google Tag Manager视频课程第三版http://ke.ichdata.com/course/50

在本地文件中运行GA和GTM

Google Analytics GA小站 3年前 (2017-01-12) 3351次浏览 已收录 0个评论

你可能希望可以在本地文件中运行GA和GTM,意味着不需要服务器处理你的文件,换句话说就是,你的浏览器加载本地的html,你通过地址栏是否有file:///协议来区分是否为本地文件。
在本地文件中运行GA和GTM
虽然,在本地文件中通过GTM运行GA并不是很容易,但还是可以实现的,下面我们测试一个简单的案例。

1、修改GTM容器的跟踪代码
首先你需要修改GTM容器的跟踪代码,它在加载脚本的时候使用相应的协议,但本地加载文件的协议是不同的,你需要告诉GTM去哪里加载库,这就是容器的跟踪代码:

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');</script>
<!-- End Google Tag Manager -->

你可以看到有两个内嵌url是没有明显的协议设置:在iframe中的//www.googletagmanager.com/ns.html…和脚本的自我加载/www.googletagmanager.com/gtm.js..,你需要将这两个改成https://www.googletagmanager.com/ns.html… 和 https://www.googletagmanager.com/gtm.js&#8230;,这样才能在本地加载GTM。

2、配置GA代码
这一步是配置GA代码,GA默认是对浏览器做了一下限制:

1、向GA发送请求的主机需要http或https协议
2、主机必须支持在浏览器的cookies中存储client ID
3、主机必须能够传递url给GA

上述的每一个要求都不可能在本地文件中实现,首先本地文件用的是file:///协议,第二,浏览本地文件的时候,浏览器时关闭cookie的;第三,不能正确传递url给GA。幸运的是,可以在GA的字段设置中实现上述的要求:首先你创建一个空函数的自定义变量,如下:

function() {
  return function() {}
}

然后在GTM中的字段做如下设置:

Field name: checkProtocolTask
Field value: {{Empty function}}

Field name: storage
Field value: none

Field name: page
Field value: {{Page Path}}

第一个设置的意思是在发送数据的时候不必验证协议,第二个是告诉GA不需要用浏览器的cookie存放clientid,第三个是页面的路径重写url
在本地文件中运行GA和GTM

3、clientID
设置storage : none 的缺点是不会保存client id,每次刷新都会是记录成一个新的用户,新的会话,这是我们不愿意看到的,因此,我们可以用浏览器的localStorage API去存储用户每个请求的client id,你需要设置两个变量,第一个自定变量名为JS – Set _clientId,代码如下:

function() {
  return function() {
    if (window.Storage) {
      window.localStorage.setItem('_clientId', ga.getAll()[0].get('clientId'));
    }
  }
}

第二个自定义变量名为 JS – Get _clientId,代码如下:

function() {
  if (window.Storage) {
    return window.localStorage.getItem('_clientId') || undefined;
  }
  return;
}

第一个变量实现的是将client存储在浏览器的localStorage,第二个变量是每次都从同一个地方获取clientid。
最后,你需要在GA跟踪代码中添加如下字段:

Field name: hitCallback
Field value: {{JS – Set _clientId}}

Field name: clientId
Field value: {{JS – Get _clientId}}

现在就可以测试了:首次触发GA跟踪代码的时候,就会生成clientid,并储存在浏览器的localStorage,后面的触发都会自动取localStorage拿clientid后才发送数据给GA。

来源:https://www.simoahava.com

喜欢 (2)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址