{"id":35,"date":"2019-07-31T22:23:05","date_gmt":"2019-07-31T20:23:05","guid":{"rendered":"https:\/\/grupowapps.es\/blog\/?p=35"},"modified":"2023-03-15T22:55:45","modified_gmt":"2023-03-15T21:55:45","slug":"como-integrar-tag-manager-analytics-prestashop","status":"publish","type":"post","link":"https:\/\/grupowapps.es\/blog\/como-integrar-tag-manager-analytics-prestashop\/","title":{"rendered":"Como integrar Google Tag Manager y Google Analytics en tu prestashop"},"content":{"rendered":"\n

Configuraci\u00f3n de Google Tag Manager<\/h3>\n\n\n\n

Comenzaremos d\u00e1ndonos de alta en nuestra cuenta de Google Tag Manager<\/a>.

Una vez nos hayamos dado de alta, tendremos que crear la cuenta de nuestra tienda<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Y configuramos los par\u00e1metros como podemos ver en el siguiente ejemplo:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Al finalizar este proceso y aceptar las pol\u00edticas de Tag Manager para la creaci\u00f3n de cuentas, se nos abrir\u00e1 un popup con dos c\u00f3digos de seguimiento, uno es para poner en el <HEAD> y otro es para el <BODY><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

No te preocupes si has cerrado la ventana sin darte cuenta, podr\u00e1s volver a ver los datos en Administrados > Instalar Tag Manager.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A continuaci\u00f3n, vamos a proceder a incluir esos snippets de c\u00f3digo en nuestro prestashop, para eso tenemos que ir al fichero situado en el directorio:
public_html\/themes\/<TU_TEMA_ACTIVO>\/templates\/_partials\/head.tpl<\/strong><\/p>\n\n\n\n

*Dependiendo del tema puede ser el archivo head.tpl o header.tpl<\/p>\n\n\n\n

Justo donde empieza la etiqueta <HEAD> pegamos el primer snippet de c\u00f3digo que nos ha dado Google Tag Manager, donde adem\u00e1s yo he a\u00f1adido un script casero, que incluye el ID de usuario y su email en caso de estar logeado, y que en los pr\u00f3ximos pasos os explicar\u00e9 su funci\u00f3n.<\/p>\n\n\n\n

{if $logged}\n  {literal}\n  <script>\n    window.dataLayer = window.dataLayer || [];\n    dataLayer.push({\n      'userId': '{\/literal}{$cookie->id_customer}{literal}',\n      'emailUsuario': '{\/literal}{$cookie->email}{literal}'\n    });\n  <\/script>\n  {\/literal}\n{\/if}\n{literal}\n  <script>\n    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s) \n   [0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n    'https:\/\/www.googletagmanager.com\/gtm.js? \n    id='+i+dl;f.parentNode.insertBefore(j,f);\n    })(window,document,'script','dataLayer','GTM-M9DBMJT');\n  <\/script>\n{\/literal}<\/code><\/pre>\n\n\n\n
Configurar dimensiones personalizadas en Google Analytics (GA)<\/h3>\n\n\n\n
Si accedemos a nuestra propiedad de Google Analytics, y le damos a administrar, veremos que en la columna de propiedad tenemos la opci\u00f3n de definiciones personalizadas > dimensiones personalizadas<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Una vez all\u00ed creamos las dimensiones personalizadas con el nombre de Usuario y Email y el \u00e1mbito Hit.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Para que estas dos nuevas dimensiones, recogan los datos de Tag Manager y Prestashop y los muestren en analytics, debemos configurar las variables en Tag Manager, para ello vamos a Google Tag Manager y en el apartado variables, a\u00f1adimos nuevas variables definidas por el usuario, de tipo Variable de capa de datos:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Para que la configuraci\u00f3n nos quede as\u00ed:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Creamos una con emailUsuario y otra con userID.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Captar datos de Prestashop en Tag Manager<\/h3>\n\n\n\n
Volvemos a nuestro espacio de trabajo de Google Tag Manager y a\u00f1adimos una nueva etiqueta:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Nos aparecer\u00e1 una ventana que nos dar\u00e1 elegir entre configurar etiqueta o activador,<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Seleccionamos configurar etiqueta y a continuaci\u00f3n indicamos que es de tipo Google Analytics.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
El tipo de seguimiento ser\u00e1 p\u00e1gina visita y en configuraci\u00f3n de Google Analytics (GA), seleccionamos nueva variable<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Y configuramos lo siguiente:<\/p>\n\n\n\n
\"\"
Donde UA-XXXXXXXXX-Y ser\u00e1 nuestro ID de Google analytics que queramos asociar al Tag Manager para recibir los d\u00e1tos<\/figcaption><\/figure>\n\n\n\n
Para las dimensiones personalizadas, bastar\u00e1 con darle al bot\u00f3n de la cajita y nos aparecer\u00e1n las variables definidas en el paso anterior, tal y como muestra la imagen:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Y una vez guardemos la configuraci\u00f3n, solo nos quedar\u00e1 decir que el activador ser\u00e1 para todas las p\u00e1ginas y nos deber\u00eda quedar la configuraci\u00f3n as\u00ed:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Enviar las conversiones de compras de Prestashop a Google Tag Manager y Google Analytics<\/h3>\n\n\n\n
En este paso, tendremos que volver a tocar el c\u00f3digo de prestashop, para que le env\u00ede datos del pedido a Google Tag Manager.
<\/p>\n\n\n\n
Por tanto, deberemos ir al fichero situado en: public_html\/controllers\/front\/OrderConfirmationController.php<\/strong>
Y justo antes de la l\u00ednea donde se carga order-confirmation.tpl, deberemos incluir el siguiente snippet de PHP:<\/p>\n\n\n\n
$order = new Order($this->id_order);\n$cart = new Cart($order->id_cart);\n$productos = $cart->getProducts();\n$this->context->smarty->assign(array(\n  'id_orden'=> $this->id_order,\n  'total'=> $order->total_paid_tax_incl,\n  'shippment_price'=> $order->total_shipping_tax_excl,\n  'TAX'=> ($order->carrier_tax_rate\/100) + 1,\n  'productos' => $productos\n));<\/code><\/pre>\n\n\n\n
Y ahora en el fichero del template recogeremos estos datos, para ello vamos a order-confirmation.tpl y en la primera l\u00ednea de c\u00f3digo incluimos este script:<\/p>\n\n\n\n
{literal}\n  <script type=\"text\/javascript\">\n      window.dataLayer = window.dataLayer || [];\n      dataLayer.push({\n        'transactionId': '{\/literal}{$id_ orden'}{literal}',\n        'transactionTotal': {\/literal}{$total }{literal},\n        'transactionTax': {\/literal}{$ TAX\u2019}{literal},\n        'transactionShipping': {\/literal}{$ shippment_price}{literal},\n        'transactionProducts': [{\/literal}{\n            foreach from=$productos item=producto name=productos\n         }{literal}\n         {\n           'sku': '{\/literal}{$producto.id_product}{literal}',\n           'name': '{\/literal}{$producto.name}{literal}',\n           'price': {\/literal}{$producto.price_wt}{literal},\n           'quantity': {\/literal}{$producto.quantity}{literal}\n        }{\/literal}\n        {if $smarty.foreach.productos.iteration!=$productos|@count}\n        {literal},{\/literal}\n        {\/if}\n     {literal}\n     {\/literal}{\/foreach}],{literal}\n     'event': 'transactionComplete'\n   })\n<\/script>\n{\/literal}<\/code><\/pre>\n\n\n\n
Con esto, todas las compras que se realicen en nuestra tienda, se enviar\u00e1n a google Tag Manager. Para reflejarlas en Google Analytics, tendremos que crear un activador en Tag Manager al cual le pondremos el nombre de evento transactionComplete tal y como hemos llamado en el anterior script.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Y para finalizar creamos una nueva etiqueta de tipo Google Analytics, con seguimiento de transacci\u00f3n donde el activador ser\u00e1 el que acabamos de crear para el evento transactionComplete.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ahora que ya tenemos todo configurado, solo queda publicar los cambios, para eso, le damos al bot\u00f3n azul \u2018ENVIAR\u2019 que est\u00e1 situado en Tag Manager arriba a la derecha.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Y creamos la versi\u00f3n con un nombre y descripci\u00f3n, le damos a publicar y habremos finalizado nuestra configuraci\u00f3n.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Para comprobar que todo est\u00e1 correcto, vamos a Google Analytics > Conversiones > Comercio Electr\u00f3nico >Visi\u00f3n General<\/strong> y si todo ha ido correctamente empezaremos a ver reflejadas las transacciones y ventas de la tienda, aunque cabe recordar que al principio pueden tardar unas horas en ser mostradas.<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
Si necesitas configurar etiquetas de Google en tu p\u00e1gina web te explicaremos c\u00f3mo usar Google Tag Manager.<\/p>\n","protected":false},"author":1,"featured_media":36,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11],"tags":[10,6,5,7,8,12,9,3],"class_list":["post-35","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prestashop","tag-conversiones","tag-ga","tag-google-analytics","tag-google-tag-manager","tag-gtm","tag-prestashop","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":1,"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":545,"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions\/545"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/media\/36"}],"wp:attachment":[{"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/grupowapps.es\/blog\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}