在本地文件中运行GA和GTM

你可能希望可以在本地文件中运行GA和GTM，意味着不需要服务器处理你的文件，换句话说就是，你的浏览器加载本地的html，你通过地址栏是否有file:///协议来区分是否为本地文件。

虽然，在本地文件中通过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…,这样才能在本地加载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

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