Rails 4 turbolinks với Google Analytics

Question

Tôi tự hỏi cách tốt nhất để triển khai mã theo dõi Google Analytics cùng với liên kết turbo trong Rails 4. Đoạn mã bình thường có hoạt động không? Tôi cũng đã thấy a gems cho điều này nhưng tôi không chắc chắn nó làm gì.

Answer 1

Tôi nghĩ ý tưởng tốt hơn là sử dụng Universal Analytics mới (từ tệp analytics.js).

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

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

Và sau đó khi bạn muốn gửi một sự kiện ví dụ, bạn có thể sử dụng

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

Hãy cẩn thận để làm cho mã này trong cơ thể, và không có trong cái đầu. Turbo-link chỉ thay thế cơ thể.

Và cũng hãy cẩn thận:

1) GA_URL cần phải phù hợp của các trang của bạn url

2) Sự kiện hiển thị trong thời gian thực, nhưng trong tab sự kiện, họ chỉ xuất hiện sau 24h +

3) sở hữu của tài khoản của bạn cần phải được 'Universal cho giải pháp này để làm việc

docs

Universal Analytics:

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

Answer 2

Theo điều này site, bạn chỉ cần thực hiện một sửa đổi nhỏ. Vấn đề với Turbolinks là nó chỉ cập nhật các phần của trang web và do đó, Google Analytics thường không nhận thấy rằng trang đã thay đổi. Vì vậy, bạn phải thông báo cho nó bằng tay bằng cách thêm CoffeeScript sau vào một tập tin trong tài sản của bạn/thư mục javascript:

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

LƯU Ý: này không được mã của tôi, nó được lấy trực tiếp từ các trang web liên kết trước

Answer 3

liếc nhanh vào source cho thấy, rằng điều duy nhất đá quý này có tác dụng thêm một số javascript để các tài sản đường ống

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

đó là tất cả để có nó. Bạn có thể sử dụng đá quý hoặc thêm một cái gì đó giống như đoạn mã này theo cách thủ công vào nội dung javascript của bạn.

Answer 4

Tôi đã đi với một cách tiếp cận khác mà tôi thấy trên một số trang web nhưng có vẻ hợp lý.

Thêm GA vào tiêu đề của bạn như bình thường nhưng với một sửa đổi nhỏ để nhận xét sự kiện trackPageview tự động diễn ra.

<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> 

Sau đó thêm địa chỉ này vào đâu đó trong số body vì cơ thể được tải lại cho turbolinks.

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

Kiểm tra sản xuất là tùy chọn nhưng đây là cách hay để không có lần truy cập cục bộ GA theo dõi nếu bạn đang tích cực phát triển. Điều thú vị khác là bạn không phải lo lắng về việc rối tung với trang: thay đổi hoặc trang: gắn kết ràng buộc và bạn có thể tự tin rằng nó sẽ hoạt động trên bất kỳ trình duyệt nào có thể theo dõi được bằng GA mà không phải lo lắng về số lần truy cập kép hoặc bất kỳ điều gì lạ .

Answer 5

Giải pháp này đã làm việc tốt nhất cho tôi: http://reed.github.io/turbolinks-compatibility/google_analytics.html.

Nó đòi hỏi ít nhất Turbolinks v2.1.0 hoặc cao hơn.

Answer 6

Tôi thích giải pháp vladCovaliov vì có vẻ như tài khoản mới nhất sử dụng Universal Analytics theo mặc định (mà cũng được tốt hơn đặc trưng trong quan điểm của tôi). Tuy nhiên, tôi nghĩ rằng câu trả lời này cần phải được kết hợp với những lời đề nghị khác mà nhận xét ra các lần xem trang ban đầu, sử dụng các sự kiện page:change, và theo dõi lần xem trang, không sự kiện.

Ví dụ, trong bạn <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 %> 

Và sau đó trong một file js bạn đã tải thông qua các đường ống dẫn tài sản:

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

này sẽ ghi lại một lần xem trang cho mỗi trang bạn nạp với hoặc không có Turbolinks. Lưu ý rằng yêu cầu window.location.pathname, nếu không bạn có thể lấy URL của trang đầu tiên được tải cho tất cả các lần tải trang tiếp theo. (Điều này cũng cung cấp cho bạn một nơi tốt đẹp để chỉnh sửa URL báo cáo nếu bạn muốn, chẳng hạn, loại bỏ :id đoạn đường đi từ URL RESTful.)

Bạn cũng có thể sau đó dễ dàng gọi:

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

Để báo cáo Sự kiện cho các sự kiện javascript thú vị khác trong trang web của bạn.

Answer 7

Chúng tôi chỉ mất đoạn chuẩn được cung cấp bởi Google, dịch nó để CoffeeScript, sau đó sửa đổi tác vụ cuối cùng vì vậy nó được liên kết với tất cả các "sẵn sàng" và "page: tải" sự kiện. Chúng tôi cũng thêm tuyên bố có điều kiện để chỉ gửi dữ liệu nếu khách truy cập hiện tại không phải là quản trị viên (vì vậy dữ liệu của chúng tôi vẫn càng sạch càng tốt).

((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 

Answer 8

Tôi đánh giá cao câu trả lời của scottwb, nhưng tiếc là nó không hoạt động với Rails 5. Trong Rails 5 sự kiện Turbolinks đã được đổi tên. Sự kiện 'trang: thay đổi' đã được đổi tên thành 'turbolinks: load'. Đây là lý do tại sao ví dụ của anh ấy không hoạt động nữa.

Bạn có thể tìm thấy một cái nhìn tổng quan về cách họ đã đổi tên ở đây: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

Vì đây đã cho tôi một thời gian để tìm ra, tôi đăng Rails đúng 5 thực hiện cho tất cả mọi người đến sau ta.

Đặt đoạn mã sau vào bạn <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> 

Và sau đó trong một file js trong bạn đường ống tài sản (ví dụ application.js.):

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

Hãy nhớ để thay thế "UA-XXXXXXXX-X "với ID Google Analytics của bạn.