如何將Universal Analytics集成到Chrome擴展中？

Question

Chrome擴展指南中包含舊分析安裝教程：https://developer.chrome.com/extensions/tut_analytics.html

說明只是說要鏈接到https版本並更新清單以允許從該URL加載腳本。所以這些應該仍然適用於新版本。事實上，我可以看到從服務器加載的腳本。

一旦腳本加載分析沒有正確初始化它自己，並且從不處理它的內部隊列（ga.f）將這些事件發送到服務器。控制檯中沒有錯誤。它只是安靜地無所事事。

我的猜測是，新的通用Analytics（分析）是不成立的擴展環境中運行，但普遍的文檔沒有提及的是：https://developers.google.com/analytics/devguides/collection/analyticsjs/

沒有人知道，如果它甚至有可能加入通用Analytics（分析）還有什麼時候可以添加？

Answer 1

有一種方法可以使用Measurement Protocol與Google Analytics進行通信。 我公司開發的腳本是：

https://github.com/melalj/universal-ga-extension

Answer 2

我正好遇到這一點，似乎可以透過已經破解我的方式。這可能會在某些時候打破或不充分發揮作用，但在這裏有雲：

• 下載GA變醜從+精縮源代碼在這裏：https://www.google-analytics.com/analytics.js，把你的瀏覽器擴展程序文件夾，它可以通過在以後加載背景頁面。

• 在這裏面，發現看起來像這樣的功能：

function Oa(){var a=M[B][E];if("http:"!=a&&"https:"!=a)throw"abort";}. 

這是因爲我們的「協議」中的「故障點」是「鉻擴展名：」和也不的兩個。

• 所以..改變這個功能是這樣的：

function Oa(){var a=M[B][E];if("chrome-extension:"!=a&&"http:"!=a&&"https:"!=a)throw"abort";} 

• 添加這種「內容安全策略」，以你的清單文件，確保它指向本地analytics.js的版本你剛纔修改：

"content_security_policy": "script-src 'self' chrome-extension://EXTENSIONID/path/to/analytics.js; object-src 'self'", 

• 更改GA片段也指向了同一個文件，是這樣的：

(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','chrome-extension://EXTENSIONID/path/to/analytics.js','ga'); 

希望這會有所幫助。

Answer 3

有對於在谷歌代碼issue：解決的辦法是通過分析你自己的協議檢查功能或者乾脆null因爲沒有檢查，在official way。

這有後ga('create', ...)來：

ga('set', 'checkProtocolTask', null); // Disable file protocol checking. 

所以你不需要修改原來的analytics.js腳本。只需添加標準的跟蹤代碼段（不要忘記添加「https：」前綴），並在您的內容安全政策中添加「https://www.google-analytics.com」。

ayal gelles解決方案的注意事項： 因爲它已包含在'self'聲明中，所以沒有必要將chrome-extension://...添加到內容安全策略中。另外，不應通過硬編碼URL加載腳本，而應使用chrome.runtime.getURL("path/to/analytics.js")。這樣您就不需要知道您的分機號，Chrome會爲您填寫。

Answer 4

我設法使用Chrome Platform Analytics（CPA）啓動並運行Google Analytics。唯一令人困惑的部分是如何在GA的管理控制檯中設置屬性。我不得不創建一個移動應用程序屬性，這不太直觀。

此外，我創建了一個options page，允許用戶在需要時禁用分析，以符合opt-out的要求。

我希望有幫助！

Answer 5

我寫了這個博客帖子 - How to add Google’s Universal Analytics tracking to a Chrome extension

下面是它的膽量：

// Standard Google Universal Analytics code 
(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'); // Note: https protocol here 

ga('create', 'UA-XXXXX-YY', 'auto'); 
ga('set', 'checkProtocolTask', function(){}); 
ga('require', 'displayfeatures'); 
ga('send', 'pageview', '/options.html'); 

有3點我特別想強調：

• 指定腳本地址開頭的「https」與manifest.json文件中的列表匹配
• 覆蓋 - - 否則谷歌分析將在格式chrome-extension://gdocgfhmbfbbbmhnhmmejncjdcbjkhfc/options.html

Answer 6

關於新的analytics.js拒絕URL（如相對舊的ga.js）用空功能

通過指定路徑發送一虛擬網頁瀏覽這個例子對我的作品：

function setupGoogleAnalytics() { 
    if (!window.ga) { 
    (function(){ 
     window.ga = function() { 
     (window.ga.q = window.ga.q || []).push(arguments); 
     }, window.ga.l = 1 * new Date(); 
     var tag = 'script'; 
     var a = document.createElement(tag); 
     var m = document.getElementsByTagName(tag)[0]; 
     a.async = 1; 
     a.src = 'https://www.google-analytics.com/analytics.js'; 
     m.parentNode.insertBefore(a, m); 
    })(); 
    ga('create', 'UA-XXXXXXX-Y', 'auto'); 
    ga('set', 'checkProtocolTask', null); 
    } 
} 

請注意，您需要添加以下content_security_policy片斷對於manifest.json：

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