Añadir Analytics y Tag Manager en plantilla Magento 2
Veamos cómo podemos modificar nuestra plantilla de Magento 2 para poder poner dentro el código de Analytics o Tag manager. Ya avanzamos que hay que tener conocimientos de programación y sobretodo, de Magento.
Ficheros a crear o modificar
El resumen es que deberemos crear tres ficheros. Dos nuevos, y uno que podemos copiar (si no existe ya en nuestra plantilla). Empecemos
app/design/frontend/*tu_vendor*/*tu_tema*/Magento_Theme/html/mis_scripts_head.phtml
Este es un fichero que debemos crear, y que dentro tendrá el código que necesitamos colocar en el head de nuestra plantilla. Un ejemplo sería el código de Analytics o Tag Manager
<!-- 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-XXXXXXXXX');</script>
<!-- End Google Tag Manager -->app/design/frontend/*tu_vendor*/*tu_tema*/Magento_Theme/html/mis_scripts_body.phtml
Aquí lo mismo que el anterior, pero el código que se pondrá justo después de empezar el body de la página. Por ejemplo el código de Tag manager para los que tienen el JavScript desactivado:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->Ya tenemos los dos ficheros creados en la carpeta html y que serán los que incrustemos en la página web (y que contienen el javascript que queremos insertar)
app/design/frontend/*tu_vendor*/*tu_tema*/Magento_Theme/layout/default.xml
Ahora toca ver el fichero encargado de la estructura y que cargará los dos ficheros anteriores. Ese el el default.xml de la carpeta layout. Normalmente, la plantilla ya lo tendrá en la carpeta indicada:
app/design/frontend/*tu_vendor*/*tu_tema*/Magento_Theme/layout/default.xml
Una vez tenemos el fichero lo editamos añadiendo el siguiente código.
<referenceContainer name="head.additional">
<block class="Magento\Framework\View\Element\Template" name="gtm.head" before="-" template="Magento_Theme::html/gtm_head.phtml" />
</referenceContainer>
<referenceContainer name="after.body.start">
<block class="Magento\Framework\View\Element\Template" name="gtm.body" before="-" template="Magento_Theme::html/gtm_body.phtml" />
</referenceContainer>Si no existe los apartados (referenceContainer) que os mostramos, hay que crearlos. Si ya existen, debéis poner los blocks dentro.
Como siempre, no nos hacemos responsables de lo que pueda pasar. Este artículo sólo es orientativo. Cada Magento tiene sus cosas, y cada plantilla funciona diferente. Sólo es una orientación de cómo hacerlo.
Esperamos que con este artículo podáis saber cómo poner vuestro código javascript de Analytics o TagManager en el head o body de la plantilla de vuestro Magento.
Más información