¿Por qué no funciona el código que nos proporciona Google Tag Manager al añadirlo en nuestra tienda?


Cuando registramos nuestra página web o tienda online en Google Tag Manager, se nos proporciona un código que debemos añadir a nuestra página inmediatamente después de la etiqueta body:

<!-- Google Tag Manager -->
            <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5HXXXX2"
            height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
            <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=
            '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-5HXXXX2');</script>
<!-- End Google Tag Manager -->  

La etiqueta body la vamos a encontrar generalmente en el archivo "/themes/NOMBRE_MI_TEMA/header.tpl":

<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">

Si pegamos el código debajo de estas líneas tal y como nos lo proporciona google no funciona, esto es debido al sistema de plantillas que utilizan los temas en prestashop: Smarty. Sin entrar en detalles de su funcionamiento, para solucionarlo tenéis que utilizar el tag "{literal}" del sistema de plantillas. El código tiene que quedar algo así:

<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">
{literal}
<!-- Google Tag Manager -->
            <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-2HXXXX2"
            height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
            <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=
            '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-2HXXXX2');</script>
<!-- End Google Tag Manager -->  
{/literal}

¿Para qué sirve la etiqueta "literal" en Smarty?

Sirve para incluir código javascript o css en nuestras plantillas, Smarty no interpreta lo que encuentra en el interior de la misma, lo muestra tal y como lo encuentra.

¿Preparado para empezar tu proyecto?

¡Comencemos!