Guide: Sådan tilføjer du Google Tag Manager i PrestaShop 1.7
Her uddeler vi gratis guldkorn, om alt det vi arbejder med. I denne artikel gennemgår vi, hvordan man tilføjer Google Tag Manager på PrestaShop 1.7 direkte i koden.
Hassan Aziz
Partner & Projektleder, Bullmade
Kort fortalt
I PrestaShop 1.7 er arkitekturen anderledes i temafilerne, hvor <head> og <body> teknisk set ligger i flere filer, modsat PrestaShop 1.6, hvor der i header.tpl både er inkluderet <head> og <body> tag. Det betyder også at indsættelse af et tag som Google Tag Manager skal indsættes anderledes i PrestaShop 1.7 end det skal i Prestashop 1.6.
I denne guide gennemgår vi step-by-step, hvordan du tilføjer Google Tag Manager i PrestaShop 1.7. Inden vi kigger på guiden, er der en vigtig ting du bør vide om tags i PrestaShop. PrestaShop er bl.a. bygget i smarty, hvilket betyder at javascripts skal klamperes i et tag der hedder {literal}. Derfor er det vigtigt at alle javascript tags hvor der indgår “<script” altid skal klamperes med {literal} {/literal}.
Når du skal implementere Google Tag Manager får du to tags. Et tag i <head> og et tag i <body>. I tilfældet med Google Tag Manager er det kun <head> tagget som skal klamperes med {literal} .
Guide: Sådan indsætter du Google Tag Manager i PrestaShop 1.7
1. Når du skal implementere Google Tag Manager får du to tags. Det tag som skal indsættes i din header <head> ser sådan ud: <!-- 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',' XXX-XXXXXX ');</ script> <!-- End Google Tag Manager -->
Dette tag skal indsættes i din head.tpl temafil, som du finder her: /themes/dit-tema/templates/_partials/head.tpl Google anbefaler at du indsætter koden så højt oppe i filen som overhovedet muligt, men i princippet kan du indsætte det et vilkårligt sted. Du kan f.eks. tilføje tagget på linje 31 lige før linjen {block name='head_seo'}
Som det kan se på billedet, er koden sat ind i mellem {literal} tags.
- Den anden kode du får af Google, er den kode som skal indsættes i din <body> . Koden ser således ud:
<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www. googletagmanager.com/ns.html? id=XXX-XXXXX" height="0" width="0" style="display:none; visibility:hidden"></iframe></ noscript> <!-- End Google Tag Manager (noscript) -->
Denne kode er ikke et script, men blot en iframe. Derfor skal koden ikke sættes ind imellem {literal} tags.
Koden kan indsættes flere steder, det skal blot være en fil som indeholder et body tag. Den fil vi plejer at tilføje det i, er i layout-both-columns.tpl som ligger i din temafil her: /themes/transformer/templates/layouts/layout-both-columns.tpl.
I filen kan du tilføje koden efter <body> tagget som det første, f.eks. på linje 18 efter det første {/block} tag (placeringer af linjerne afhænger at dit tema):
- Når du har tilføjet de to tags, og gemt filerne på din FTP, så skal du evt. slette din cache for at ændringerne træder i kraft. Du kan slette PrestaShop cachen i dit PrestaShop administrationspanel under menuen: Avancerede funktioner > Ydelser. Heraf trykker du på knappen “Ryd cache” øverst til højre.
Skrevet af
Hassan Aziz
Partner & Projektleder, Bullmade
Relaterede artikler om Ecommerce
Læs også
01 Hvad AI koster i drift: regnestykket, ingen viser jer, før regningen kommer 02 SaaS efter AI: hvis produktet kan bygges på en weekend, er det ikke et produkt 03 AI-forordningen for webshops: hvad I skal gøre, og hvad I roligt kan lade være