La guia de platanus
  • README
  • Acuerdos
    • Guía de Estilo
      • Ejemplo: Módulo para variables de entorno
  • Stack
    • Getting Started
    • Nuestro MVC extendido
    • Ruby/Rails
      • Power Types
        • General
        • Patrones
          • Commands
          • Utils
          • Services
          • Values
          • Observers
      • Potassium
      • Power API
      • Active Admin
        • General
        • Active Admin Addons
      • Pundit
      • Shrine
        • General
        • Manejo y procesamiento de imágenes
      • Pry
      • Strong Migrations
      • Data Migrate
      • Active Job
      • Gems
      • Engines - Modularización en Rails
    • JavaScript
      • Vue
        • General
        • Testing
      • AlpineJS
    • CSS
    • Mobile
      • Expo
      • React Navigation
      • Redux
        • Crear y conectar una slice en Redux
      • Styling
        • Usando Tailwind en React Native
      • Recursos
    • Resolviendo problemas (debugging)
    • Machine Learning
  • Setup
    • Configuración de tu entorno local
      • Instalación Base
        • OSX
        • Windows
        • Linux
      • Tecnologías
        • Ruby
        • Docker
        • Node
      • Herramientas
        • Linters
        • Editores
          • IDE/Editores de Código
            • Visual Studio Code
            • Sublime Text
        • Git
    • Configuración de proyectos
      • Getting Started
      • Heroku
      • Rails
      • Circle CI
      • Vue
      • Apple App Store
      • Google Play
      • Expo
      • S3
      • Git
      • Cloudflare
      • Sendgrid
      • Dominio + Mailing
      • Google Tag Manager, Analytics, Search Console, etc.
        • Google Tag Manager
          • Configurar Google Tag Manager
        • Google Analytics
        • Indexación en Google
        • Google Ads
      • Crear un bucket de S3
      • SlackBot
      • Google BigQuery
  • Deployment
    • Rails
    • Ruby Gems
    • Browser and Node (Open Source)
    • Mobile
      • Mobile Resources
      • Apple App Storage
      • Google Play
  • Upgrades
    • Upgrade de Vue 2 a Vue 3
    • Migración Hound → reviewdog
    • Upgrade de Postgresql
Con tecnología de GitBook
En esta página
  • Instalación con Potassium
  • Instalación Manual
  1. Setup
  2. Configuración de proyectos
  3. Google Tag Manager, Analytics, Search Console, etc.
  4. Google Tag Manager

Configurar Google Tag Manager

AnteriorGoogle Tag ManagerSiguienteGoogle Analytics

Última actualización hace 2 años

Primero tenemos que configurar un contenedor de para nuestra aplicación. Para hacer esto, si no se tiene una cuenta primero se debe crear una, y bajo esta crear un contenedor. explica bastante bien como crear un contenedor.

Instalación con Potassium

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-

Instalación Manual

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)

Google Tag Manager
Este corto video