Kategorien
SSGTM

SSGTM für Prestashop

Auf dieser Seite erkläre ich dir alles, was du über dieses Modul wissen musst. Fangen wir mit den drei Bereichen des Moduls an:

  1. Im ersten Bereich nimmst du Modul-Einstellungen vor.
  2. Der zweite Bereich enthält eine List aller Code-Vorlagen.
  3. Im dritten Bereich kannst du eine bestehende Code-Vorlage bearbeiten oder eine neue erstellen.

Einstellungen

  1. Du kannst das Modul jederzeit aktivieren & deaktivieren. Wenn das Modul deaktiviert ist, dann werden keinerlei Skripte in deine Seite geladen. Erst wenn es aktiviert ist, lädt das Modul den Google Tag Manager in deiner Seite und fügt die Code-Vorlagen ein.
  2. Die meisten Prestashop-Themes nutzen jQuery. Das ist eine sehr verbreitete JavaScript Bibliothek, die den Zugriff auf die JavaScript Objekte deiner Seite vereinfacht. Wenn dein Theme kein jQuery nutzen sollte, kann das SSGTM Modul es für dich laden. Diese Option solltest du nicht aktivieren, wenn jQuery bereits geladen wird. Sonst kommt es zu Konflikten und Fehlern.
  3. Die GTM-ID findest du im Workspace vom Google Tag Manager

ToDo: Aktiviere das Modul, Kopiere die GTM-XXXX-ID und speichere die Einstellungen.

Code-Vorlagen

Mit der Installations des Moduls werden Standard-Code-Vorlagen geladen. „Snippets“ genannt.

Je nachdem ob du Prestashop 1.6 oder 1.7 hast, werden Snippets installiert, die für das jeweilige Standard-Theme von Prestashop funktionieren.

Wichtig: Wenn du ein anderes Theme als das Standard-Theme von Prestashop verwendest oder Änderungen am Standard-Theme gemacht hast, kann es sein, dass nicht alle Snippets funktionieren und angepasst werden müssen.

  1. Die Tabelle zeigt alle Code-Vorlagen (Snippets), die erstellt wurden. Ein Snippet hat einen internen Namen, ist nur für bestimmte Seite gültig und besteht aus einem JavaScript Code.
  2. Bei Bedarf kannst du weitere Snippets hinzufügen. Das geht mit dem „+“-Symbol oben rechts.
  3. Wenn du ein Snippet anklickst oder im Menü „View“ auswählst, öffnet das Modul das Snippet zum Bearbeiten. Über das selbe Menü kannst du es auch löschen.

Snippet bearbeiten

Wenn du einen Snippet zum Bearbeiten öffnest, hast du unten im Editor drei Felder.

  1. Der Name ist frei wählbar und nur für dich. Benenne das Snippet möglichst sprechend, damit du auf den ersten Blick erkennst, um was für einen Code es sich handelt.
  2. Auf welchen Seiten soll dieses Snippet in die Seite geladen werden? Die Snippet-Page ist der interne Name des Prestashop-Controllers. index ist beispielsweise die Startseite. category die Seite Kategorie-Seite. order ist die Kasse und der Bestellvorgang. usw. Du kannst mehrere Seiten angeben, in du sie mit einem „,“ (Comma) auflistest.
Wie die Seiten heißen, findest du in der Page-Spalte unter Traffic & SEO.
  1. Der „Snippet Code“ ist der JavaScript-Code, der auf den Seiten geladen werden soll. Hier kannst du praktisch alle Anpassungen machen, die du brauchst, damit der Google Tag Manager in deinem Shop funktioniert.

Testen

Ob dein Snippet in die Seite geladen wird, kannst du direkt auf deiner Seite testen, in dem du dir den Seitenquelltext anzeigen lässt. Scroll entweder nach ganz unten oder such nach „gtmData„.

Kurz vor dem schließenden </body> Tag solltest du die beiden Variablen dataLayer und gtmData sowie dein Snippet finden.

Code-Vorlagen zum Kopieren

Das Modul erstellt die passenden Code-Vorlagen für Prestashop 1.6 oder 1.7 bei der Installation. Solltest du die Vorlagen aus Versehen gelöscht oder verändert haben, dann kannst du sie der Vorlagen-Seite erneut kopieren und einfügen.

Das gtmData Objekt für Entwickler.

Vor jedem Snippet erzeugt das SSGTM Modul ein gtmData Objekt, das (je nach Seite) in etwa so ausshen kann:

window.gtmData = {
	"page":"cart",
	"language":{"id":2,"code":"en"},
	"shop":{"id":1,"name":"Your Shop"},
	"currency":{"id":1,"code":"EUR"},
	"products":[{
		"id":"44",
		"name":"Your Product",
		"price":24.950001,
		"quantity":1,
		"brand":"Product Brand"}
	]
};

Du kannst dieses Objekt in deinen Code-Snippets benutzen, um die Daten auszulesen. So funktionieren auch alle vorgefertigten Code-Vorlagen, die das Modul bei der Installation lädt.

Bei Fragen kannst du mich direkt über die Prestashop Addons Seite konktaktieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.