Jak dostosować szablony do integracji z Google Tag Manager?

1. Wstęp

W związku ze zmianami w Comarch e-Sklep od wersji 2018.6, które poszerzają zakres integracji z Google Tag Manager, szablony w wersji starszej będą wymagały wprowadzenia zmian, które pozwolą na wykorzystanie w pełni funkcjonalności opisanych w artykule Integracja z Google Tag Manager.

Uwaga
Poniższa konfiguracja przeznaczona jest dla użytkowników posiadających e-Sklep w wersji 2018.6 lub wyższej ale z szablonami w starszej wersji. Pliki szablonu, fragmenty ich kodu oraz modyfikacje przedstawione w instrukcji dotyczą darmowych szablonów Comarch. W przypadku szablonów indywidualnych miejsce wklejenia skryptów niezbędnych do dostosowania szablonu powinien wskazać twórca szablonu

2. Implementacja skryptów

Jeżeli przed wersją 2018.6 integracja była już konfigurowana to konieczne będzie usunięcie starego skryptu dodanego do ostatniej strony zamówienia.
W tym celu w panelu administracyjnym sklepu przejdź do obszaru Wygląd sklepu / Ustawienia / Edytuj ustawienia zaawansowane / Edytuj HTML i usuń z pliku lastpagescripts.html poniższy skrypt:
<script>
dataLayer.push({{ page.GTMDataLayer }});
dataLayer.push({event:'UaTrack',VirtualPath:null});
</script>

W zależności od szablonu plik lastpagescripts.html będzie zlokalizowany w innym miejscu w strukturze plików:

  • Szablon Bursztyn, Opal i Szafir – order / lastpagescripts.html
  • Szablon Agat – partials / cart / lastpagescripts.html

Następnym krokiem będzie implementacja dwóch nowych skryptów.
W pliku _layout.html znajdującym się bezpośrednio w obszarze Edytuj HTML zamień istniejący skrypt znajdujący się na początku sekcji <body>
<script>var dataLayer=[{{ page.GTMDataLayer }}];</script>
na nowy:
<script>var dataLayer={{ page.GtmDL }};</script>
 

Kolejny skrypt należy umieścić w pliku odpowiedzialnym za koszyk
<script>
(function(){
var i,dl={{ page.GtmDL }};
for(i in dl) dataLayer.push(dl[i]);
})();
</script>

W zależności od szablonu będzie to inny plik – nazwa i lokalizacja pliku oraz miejsce wklejenia powyższego skryptu wskazane poniżej:

  • Szablon Bursztyn, Opal – order-cart-container.html

  • Szablon Agat – partials / cart / cart-template.html

  • Szablon Szafir – order / cart.html

oraz w pliku order / thx.html

 

Wskazówka
Pamiętaj o zapisaniu i publikacji wszystkich zmian wykonanych w szablonie.
Po przygotowaniu szablonu zgodnie z powyższymi instrukcjami możesz przejść do konfiguracji integracji Twojego sklepu z Google Tag Manager opisanej w artykule Integracja z Google Tag Manager.

3. Przydatne linki

Google Tag Manager:

Pomoc

Strona serwisu

Dokumentacja programistyczna

Google Analytics:

Strona serwisu

Dokumentacja programistyczna

Czy ten artykuł był pomocny?