Shoper & Google Tag Manager – jak dodać, żeby działało


Na początek. Każdy e-sklep powinien (o ile zamierza coś sprzedawać w Internecie) mieć zrobioną analitykę ze zdarzeniami, a tego nie bardzo da się dokonać bez zainstalowanego Google Tag Managera. W przypadku Shopera pojawił się problem z wdrożeniem GTM - cały czas wywalało jakieś błędy, jednak jest i na nie metoda, o której niżej;)

Z jakichś względów Shoper nie lubi się z nawiasami typu {}. Jako, że te nawiasy są nieodłącznym kawałkiem skryptu Google Tag Managera, metoda na uruchomienie GTM w Shoperze polega na nadaniu temu skryptowi „wyjątkowego charakteru”.

Robimy to przez dodanie znacnzików przed skryptem {literal} i po skrypcie {/literal}.

W efekcie powinniśmy uzyskać coś takiego:

{literal}
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
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-XXXXXX');</script>
<!-- End Google Tag Manager -->
{/literal}

Dodanie tych dwóch znaczników kompletnie usuwa problem błędu przetwarzania kodu, czyli nie będziecie musieli już wybierać między „syntax error: unrecognized tag: w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js' (Smarty_Compiler.class.php, line 457)” witającym odwiedzających, a brakiem GTM na stronie.

Acha, jeszcze w sumie ważne jest, gdzie i jak ten cały Google Tag Manager dodać do Shopera;)

Aby, to zrobić, należy:
1) Wejść  w Konfiguracja > Wygląd w górnym menu

Google Tag Manager - instalacja w Shoper - krok 1

2) W menu, które pojawi się po lewej stronie należy kliknąć „Edycja zaawansowana”

Google Tag Manager - instalacja w Shoper - krok 2

3) Z listy plików wybrać „body_head.tpl” i klikając zębatkę, jak na screenie, wybrać „Edytuj”

Google Tag Manager - instalacja w Shoper - krok 3

4) Gotowy skrypt Google Tag Mangera wklejamy na samej górze (tylko XXXXX podmieniamy na własną wartość)

Google Tag Manager - instalacja w Shoper - krok 4

5) Kroki 3) i 4) powtarzamy, ale dla pliku „body_head_checkout.tpl”