ruby-on-rails ruby google-analytics ruby-on-rails-4 turbolinks

ruby on rails - Rails 4 turbolinks con Google Analytics



ruby-on-rails google-analytics (8)

Me pregunto cuál es la mejor manera de implementar el código de seguimiento de Google Analytics junto con el enlace turbo en Rails 4. ¿Funcionará el fragmento normal? También he visto gemas para esto, pero no estoy seguro de qué hacer.

Acabamos de tomar el fragmento estándar proporcionado por Google, lo tradujimos a CoffeeScript y luego modificamos la última acción, por lo que está vinculado a los eventos "listo" y "página: cargar". También agregamos declaración condicional para enviar solo los datos si el visitante actual no está en un administrador (para que nuestros datos permanezcan lo más limpios posible).

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

Agradezco la respuesta de scottwb, pero desafortunadamente no funciona con Rails 5. En los eventos Rails 5 Turbolinks se cambiaron de nombre. El evento ''page: change'' se renombró a ''turbolinks: load''. Es por eso que su ejemplo ya no funciona.

Puede encontrar una descripción general de cómo fueron renombrados aquí: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

Como esto me tomó un tiempo para descifrarlo, estoy publicando la implementación adecuada de Rails 5 para todos los que vendrán después de mí.

Pon el siguiente código en tu <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>

Y luego en un archivo js (por ejemplo, application.js ) en su canalización de activos:

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

Recuerde reemplazar "UA-XXXXXXXX-X" con su ID de Google Analytics.

Creo que una mejor idea es usar el nuevo Universal Analytics (del archivo analytics.js).

Solución 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'');

Y luego, cuando quieres enviar un evento, por ejemplo, puedes usar

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

Tenga cuidado de mostrar este código en el cuerpo y no en la cabeza. Los enlaces turbo solo reemplazan el cuerpo.

Y también ten cuidado:

1) GA_URL debe coincidir con la URL de su página

2) Los eventos se muestran en tiempo real, pero en la pestaña de eventos, solo aparecen después de 24 horas +

3) La propiedad de su cuenta debe ser ''Universal'' para que esta solución funcione

Documentos de Universal Analytics:

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

He seguido un enfoque diferente que vi en algún sitio web, pero parece razonable.

Agregue GA a su encabezado como de costumbre, pero con una pequeña modificación al comentar que el evento trackPageview automáticamente.

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

A continuación, agregue esto en algún lugar de su body porque el cuerpo se recarga para turbolinks.

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

El control de producción es opcional, pero esta es una buena manera de no tener un seguimiento de localhost de GA si está en desarrollo activo. La otra ventaja es que no tienes que preocuparte por jugar con la página: cambiar o página: cargar enlaces y que puedes estar seguro de que funcionará en cualquier navegador que sea rastreable por GA sin tener que preocuparte por los hits dobles o cualquier cosa extraña .

Me gusta la solución de vladCovaliov porque parece que la mayoría de las cuentas nuevas usan Universal Analytics de manera predeterminada (que también se presenta mejor en mi opinión). Sin embargo, creo que esta respuesta debe combinarse con las otras sugerencias que comentan la vista de página inicial, usan la page:change evento y realizar un seguimiento de las páginas vistas, no de los eventos .

Por ejemplo, en tu <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 %>

Y luego en un archivo js que ha cargado a través de la canalización de activos:

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

Esto registrará una vista de página para cada página que cargue con o sin Turbolinks. Tenga en cuenta que window.location.pathname es obligatorio; de lo contrario, puede obtener la URL de la primera página cargada para todas las cargas de página subsiguientes. (Esto también le brinda un buen lugar para editar la URL informada si desea, por ejemplo, excluir :id segmentos de ruta de :id de URL RESTful).

También puede llamar fácilmente:

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

Para informar Eventos para otros eventos interesantes de JavaScript en su sitio.

Según este site , solo necesita hacer una pequeña modificación. El problema con Turbolinks es que solo actualiza partes del sitio web y, por lo tanto, Google Analytics a menudo no percibe que la página ha cambiado. Por lo tanto, debe notificarlo manualmente agregando el siguiente CoffeeScript a un archivo en su carpeta assets / javascript:

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

NOTA: este no es mi código, se toma directamente del sitio web previamente vinculado

Un vistazo rápido a la source muestra que lo único que hace esta gema es agregar algo de javascript al inventario de activos

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

Eso es todo al respecto. Puede usar la gema o agregar algo como este fragmento de código manualmente a sus activos javascript.