1. 首頁
  2. 問答
  3. 谷歌Analytics（分析）中的Rails 4 turbolinks

谷歌Analytics（分析）中的Rails 4 turbolinks

2013-09-22 137 views

回答

13

我認爲一個更好的主意是使用新的Universal Analytics（來自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','//www.google-analytics.com/analytics.js','ga'); 

    ga('create', "#{GA_UA}", "#{GA_URL}"); 
    ga('send', 'pageview');

然後當你想發送例如一個事件，你可以使用

<script> ga('send', "event", "#{category}", "#{action}", "#{label}", "#{count}"); </script>

要小心，以使體內的代碼，而不是在頭部。渦輪鏈路僅替換車身。

而且還小心：

1）GA_URL需要符合網頁的網址

2）活動實時顯示出來，但在事件的標籤，他們只24小時後會出現+

3）你的帳戶的屬性必須是「通用」這個解決方案的工作

通用分析文檔：

https://support.google.com/analytics/answer/2790010?hl=en&ref_topic=2790009

來源

2013-10-22 20:03:54 vladCovaliov

+3

我認爲無需在每個Turbolinks頁面加載上加載Google Analytics，因此我閱讀了[使用Universal Analytics進行網頁跟蹤]（https://developers.google.com/analytics/devguides/collection/analyticsjs/pages）以及做了一些測試，並得出結論，你應該把除了最後一行都放在以便它只加載一次，然後把'ga（'send'，'pageview'）'放入。 GA_URL參數可以替換爲'auto'，因爲'pageview'調用將始終正確地確定網址 - 即使使用Turbolink也是如此。 –

+4

@hannes_l這並不適合我。它只是在隨後每次Turbolink頁面更改時發送原始URL。然而，我注意到在你鏈接到的文檔中，你可以執行'ga（'send'，'pageview'，'<％= request.path％>'）;'覆蓋URL * 。 –

+0

是的，你是對的。我可能會過度解釋我讀到的關於如何計算當前路徑的內容。因此，將您的最後一個片段放在以及其他所有內容中似乎是個好主意 - 至少這是我現在要做的。 –

0

根據這site，你只需要做一個小小的修改。 Turbolinks的問題在於它只更新網站的部分內容，因此Google Analytics（分析）通常並不認爲網頁已更改。因此，你必須在你的資產加入以下的CoffeeScript到一個文件中手動通知它/ JavaScript的文件夾：

$(document).on 'page:change', -> 
    if window._gaq? 
    _gaq.push ['_trackPageview'] 
    else if window.pageTracker? 
    pageTracker._trackPageview()

注：這不是我的代碼，它是直接取自以前鏈接的網站

來源

2013-09-22 16:25:49 amb110395

6

快速瀏覽到source表明，這種寶石做的唯一一件事就是一些JavaScript添加到資產管道

# google-analytics-turbolinks/lib/assets/javascripts/google-analytics-turbolinks.js.coffee 
if window.history?.pushState and window.history.replaceState 
    document.addEventListener 'page:change', (event) => 

    # Google Analytics 
    if window.ga != undefined 
     ga('set', 'location', location.href.split('#')[0]) 
     ga('send', 'pageview') 
    else if window._gaq != undefined 
     _gaq.push(['_trackPageview']) 
    else if window.pageTracker != undefined 
     pageTracker._trackPageview();

這一切就是這麼簡單。您可以使用gem，也可以手動將此代碼片段添加到您的javascript資源中。

來源

2013-09-22 16:29:39 klaffenboeck

14

我已經採用了不同的方法，在某些網站上看到它，但看起來很合理。

將GA添加到您的標題像往常一樣，但有一個小的修改註釋掉trackPageview事件自動發生。

<script type="text/javascript"> 
    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-FOOBAR']); 
    //_gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 
</script>

因爲身體被重新加載爲turbolinks在body然後加入這個地方。

<% if Rails.env.production? %> 
    <script>_gaq.push(['_trackPageview']);</script> 
<% end %>

生產檢查是可選的，但是這是沒有GA跟蹤本地主機命中，如果你正在積極開發一種很好的方式。另一個好處是你不必擔心與頁面混淆：更改或頁面：加載綁定，並且你可以確信它可以在GA可以跟蹤的任何瀏覽器上工作，而不必擔心雙擊或任何奇怪的事情。

來源

2013-10-05 15:38:44 AntelopeSalad

+0

這完美的工作，謝謝。 –

27

我喜歡vladCovaliov的解決方案，因爲它似乎大多數新帳戶默認情況下都使用Universal Analytics（在我看來這也是更好的功能）。不過，我認爲這個答案需要與其他建議相結合，這些建議會註釋掉初始綜合瀏覽量，使用page:change事件並跟蹤綜合瀏覽量，而不是事件。

例如，在你的<head>：

<% if Rails.env.production? %> 
    <script> 
    (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','//www.google-analytics.com/analytics.js','ga'); 

    ga('create', 'UA-XXXXXXXX-X', 'auto'); 
    //ga('send', 'pageview'); 
    </script> 
<% else %> 
    <script> 
    function ga() { 
     var params = Array.prototype.slice.call(arguments, ga.length); 
     console.log("GoogleAnalytics: " + params); 
    }; 
    </script> 
<% end %>

，然後在js文件已通過資產管道裝：

$(document).on('page:change', function() { 
    ga('send', 'pageview', window.location.pathname); 
});

這將記錄瀏覽量爲您加載每個頁面或沒有Turbolinks。請注意，window.location.pathname是必需的，否則您可以獲取加載的所有後續頁面加載的第一頁的URL。 （這也爲您提供了一個不錯的地方將網址修改報告，如果你想，說，從RESTful的網址剔除:id路徑段。）

你也可以那麼輕鬆地調用：

ga('send', "event", category, action, label, count);

舉報您網站中其他有趣的JavaScript事件的事件。

來源

2014-07-31 03:28:29 scottwb

+1

這種方法對我來說是完美無缺的，謝謝。 – bevanb

+0

我不得不說，我看了很多關於這種性質的問題，並且最終因爲它的簡單性而回答了這個問題。它也完美地工作！非常感謝你！我使用'jquery-turbolinks'寶石，所以我替換了 $（document）.on（'page：change'，function（）{' 和 '$（document）.ready（function（） {' – Alexander

+0

即使使用'jquery-turbolinks'，如果我將其更改爲'$（document）.ready'，它會將報表複合到Google Analytics中。首先點擊2個視圖，第二個點擊4，第三個爲8等。 （PS我可能一直在做錯事！） –

1

我們只是拿了谷歌提供的標準片段，將它翻譯成CoffeeScript，然後修改了最後一個動作，以便將其綁定到「ready」和「page：load」事件。我們還添加了條件語句，只在當前訪問者不在管理員的情況下發送數據（因此我們的數據儘可能保持清潔）。

((i, s, o, g, r, a, m) -> 
    i["GoogleAnalyticsObject"] = r 
    i[r] = i[r] or -> 
    (i[r].q = i[r].q or []).push arguments 
    return 

    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 
    return 
) window, document, "script", "//www.google-analytics.com/analytics.js", "ga" 
ga "create", 'UA-XXXXXXXX-XX', "yourdomain.com" 

$(document).on 'ready page:load', -> 
    ga "send", "pageview", window.location.pathname unless $('body').data('admin') is true

來源

2014-09-29 21:03:33 tddrmllr

2

我很欣賞scottwb的答案，但遺憾的是它並沒有使用Rails 5.在Rails 5個Turbolinks事件更名工作。 'page：change'事件被重命名爲'turbolinks：load'。這就是他的例子不再適用的原因。

你可以找到的他們是如何在這裏改名的概述：https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

因爲這個我花了一些時間來弄清楚，我張貼正確的Rails 5實施後，我每個人都來了。

將下面的代碼在你的<head>

<script> 
    (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','//www.google-analytics.com/analytics.js','ga'); 

    ga('create', 'UA-XXXXXXXX-X', 'auto'); 
    //ga('send', 'pageview'); //moved to an asset file because of turbolinks 
    </script>

，然後在js文件在你的資產管道（如application.js）：

$(document).on('turbolinks:load', function() { 
    ga('send', 'pageview', window.location.pathname + window.location.search); 
});

記得替換「UA-XXXXXXXX-X 「與您的Google AnalyticsID。

來源

2016-09-14 08:09:01

相關問題

 相關問題