Configurar Google Tag Manager
Primero tenemos que configurar un contenedor de Google Tag Manager para nuestra aplicación. Para hacer esto, si no se tiene una cuenta primero se debe crear una, y bajo esta crear un contenedor. Este corto video explica bastante bien como crear un contenedor.
Actualmente se puede agregar GTM utilizando Potassium. Revisar si
env.development tiene la variable de entorno GTM_CONTAINER_ID, si no la tiene ejecutar potassium install google_tag_manager.Luego hay que agregar la variable de entorno en el proyecto. El valor se obtiene en tagmanager.google.com, y siempre comienza en GTM-
Una vez creado el contenedor, se obtendran unos code snippets que deben agregarse a la aplicación para linkearla con el contenedor
Como yo lo hice fue asi: Creé un archivo
/app/views/common/_tag_manager_head.html.erb con el siguiente código:<% if Rails.env.production? %>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-####');</script>
<!-- End Google Tag Manager -->
<% end %>
Y otro archivo
/app/views/common/_tag_manager_body.html.erb con el siguiente código:<% if Rails.env.production? %>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-####"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<% end %>
OJO! EN
GTM-#### deben reemplazarlo por el id de su contenedor, que aparecé en el menú.
y luego, deben agregarse estas vistas parciales en
/app/views/layouts/application.html.erb, el head debería ir lo más arriba posible en el head, y el body lo más arriba posible dentro del tag body. Debería verse algo así:<!DOCTYPE html>
<html>
<head>
<%= render partial: '/common/tag_manager_head' %>
<title>My Applications</title>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application' %>
</head>
<body>
<%= render partial: '/common/tag_manager' %>
<div id="app">
<app></app>
<%= yield %>
</div>
</body>
</html>
Luego, se suben estos cambios a producción y estamos listos con Google Tag Manager (por ahora)
Última actualización 10mo ago