结合使用Google跟踪代码管理器和Google Analytics(分析)来跟踪Chrome扩展程序(2020年) [英] Using Google Tag Manager with Google Analytics to track a Chrome Extension (2020)

问题描述

我正在开发Chrome扩展程序，并且希望能够使用Google Analytics(分析)跟踪指标.我相信最简单的方法是通过标签管理器，而且我发现提出了这个问题.目前，我已经使用GA4设置了我的Google Analytics(分析)帐户，并且正在使用网络数据流.我将GTM标签设置为GA4配置，并确保输入了正确的测量ID.我很难找到有关在Chrome扩展程序中使用GTM/GA的任何信息，因此，我们将不胜感激任何答案或建议.

解决方案

好吧，对于仍然想知道如何将Google Analytics(分析)添加到Chrome扩展程序中的任何人，我都知道了.

首先，您必须使用Universal Analytics(analytics.js)，Google Analytics(分析)4(gtag.js)无法使用.它不处理任务，我们将需要禁用某些任务才能发送匹配.此外，也许可以将UA与Google跟踪代码管理器一起使用，但是在深入研究这一问题之后，我决定自己亲自在代码中实施跟踪会变得更加容易.此视频，向您展示如何在Google Analytics(分析)中设置UA属性.>

在我的代码中，我创建了一个JavaScript文件ga.js，其典型的Google Analytics(分析)跟踪代码如下所示:

 (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)})(窗口，文档，'脚本'，'https://www.google-analytics.com/analytics.js'、'ga')；ga(创建"，"UA-XXXXX-X"，自动")； 

进行了两处修改:在Google Analytics(分析)网址前添加"https:"，当然还要添加您自己的UA属性ID.

在那之后，我们必须通过添加来禁用checkProtocolTask​​

  ga('set'，'checkProtocolTask​​'，null); 

这将禁用文件协议检查，这是我们需要的，因为如果Google Analytics(分析)不是来自http或https协议(这源自"chrome-extension://"协议)，它将中止匹配.我还发现我需要以相同的方式禁用checkStorageTask，尽管我不太确定为什么需要这样做.我发现的所有资源都表明，只有禁用checkProtocolTask​​才能在CE中使用GA.我最好的猜测是，因为我的扩展名不是弹出窗口，而是注入的iFrame，所以cookie权限是不同的.我问了这个问题，但没有得到任何回应.为了不使用Cookie仍能跟踪用户会话，我使用localStorage存储了ga clientId，如

到我的manifest.json.和瞧！它正在工作.

最后一分钟的注意事项:我绝对建议在调试分析时使用analytics_debug.js，如果您仍然无法解决问题，请尝试设置 window.ga_debug = {trace:true}; 在控制台中获取更详细的日志.另外，在发送综合浏览量时，按如下方式将网页包含在匹配中也很重要: ga('send'，'pageview'，'/popup'); .

这真是一件令人头疼的事，所以我希望这对某人有帮助！

I am working on a chrome extension, and I would like to be able to track metrics with google analytics. I believe the easiest way to do that would be through tag manager, and I have found this tutorial that explains how to implement google tag manager in a chrome extension. However, just following this tutorial isn't working for me, and I have a few questions.

• Is it possible to track a chrome extension using Google Analytics? If so, I have only seen tutorials using Universal Analytics, but is it possible using Google Analytics 4? It is recommended to start out with GA4 now, and I would like to do that if possible.
• How would I set up a data stream? A web data stream requires a valid URL, which doesn't really apply to an extension. I have a separate website that I am working on and I can include that URL, but my goal is to track the extension, not the website.
• When debugging in GTM, it now requires you to add a URL on which to debug. My extension runs on amazon.com but when I enter amazon.com as the URL I get a 404, probably because the tracking code doesn’t actually apply to amazon, but to the iframe that is injected when I am on amazon. What would I do here?

I have it set up so that the GTM code is in a separate js file that is injected into the iframe html code at the end of the head tag. I have modified the CSP in the manifest to allow requests to google analytics and google tag manager. And when building the tag in GTM, I set the fields checkProtocolTask to false, page to a custom url, and path to {{Page Path}} as the above tutorial and this SO question have suggested. For now I have my GA account set up with GA4, and I'm using a web data stream. I have the GTM tag as a GA4 configuration and I have made sure I included the correct measurement ID. I'm having a hard time finding any information about using GTM/GA in a chrome extension, and so any answers or suggestions would be greatly appreciated.

解决方案

Okay, for anyone still wondering how to add Analytics to a Chrome Extension, I've figured it out.

First of all, you have to use Universal Analytics (analytics.js), Google Analytics 4 (gtag.js) will not work. It doesn't handle tasks, and we will need to disable certain tasks in order to send hits. Also, it may be possible to use UA with Google Tag Manager, but after I got so deep into figuring this out I decided it would just be easier for me to implement tracking in the code myself. This video that shows you how to set up a UA property in Google Analytics.

In my code, I created a JavaScript file ga.js, with the typical google analytics tracking code that looks like this:

(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');

ga("create", "UA-XXXXX-X", "auto");

with two slight modifications: add the 'https:' in front of the google analytics url, and of course add your own UA property id.

After that, we have to disable checkProtocolTask by adding

ga('set', 'checkProtocolTask', null);

This disables file protocol checking, which we need because google analytics aborts the hit if it's not originating from an http or https protocol (this is originating from a 'chrome-extension://' protocol). I also found I needed to disable checkStorageTask in the same manner, though I am less sure why I needed to do that. All of the resources I have found say that only the checkProtocolTask needs to be disabled to use GA in a CE. My best guess is because my extension isn't a popup, but an injected iFrame, so the cookie permissions are different. I asked this question about it, but haven't gotten any responses. In order to still track user sessions without the use of cookies, I used localStorage to store the ga clientId, as shown here.

I then linked this javascript file at the bottom of the head section of my html file, and added

"content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'"

to my manifest.json. And Voila! It's working.

Some last minute notes: I definitely recommend using analytics_debug.js while debugging analytics, and if you are still having trouble figuring out the issue then try setting window.ga_debug = {trace: true}; to get an even more detailed log in the console. Also, when sending pageviews, it is important to include the page in the hit as so: ga('send', 'pageview', '/popup');.

This was an absolute headache to figure out, so I hope this helps someone!

这篇关于结合使用Google跟踪代码管理器和Google Analytics(分析)来跟踪Chrome扩展程序(2020年)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！