So fügen Sie Google Tag Manager zu Shopify hinzu

Was ist Google Tag Manager?

Google Tag Manager (GTM) ist ein kostenloses Tag-Management-System Damit können Sie mehrere Tracking-Skripte in Ihrem Shopify-Shop hinzufügen und verwalten, ohne jedes Mal den Theme-Code bearbeiten zu müssen. Mit GTM können Sie Folgendes verwalten:

• Google Analytics 4-Tracking
• Facebook Pixel
• Konversionsereignisse (Kauf, Formularübermittlung, Hinzufügen zum Warenkorb)
• Benutzerdefinierte Tags für Marketing- und Analysetools

Dieser Leitfaden behandelt zwei Methoden Zur Installation: über die Google & YouTube App von Shopify (einfacher) oder durch manuelle Code-Einfügung (mehr Kontrolle), sowie Anleitung zum Testen von GTM mit GemPages-erstellte Seiten.

Stellen Sie vor dem Start sicher, dass Sie über Folgendes verfügen:

1. GTM-Konto & Container-ID

Registrieren bei Google Tag Manager.

Erstellen Sie einen Container für Ihren Shopify-Shop und kopieren Sie die Container-ID (GTM-XXXXXXX).

2. Shopify-Administratorzugriff

Sie benötigen die Berechtigung, Designs zu bearbeiten oder Skripte einzufügen.

3. Tracking-Plan

Identifizieren Sie die Ereignisse, die Sie verfolgen möchten: Seitenaufrufe, Hinzufügen zum Warenkorb, Bezahlvorgang, Käufe, Formularübermittlungen.

So installieren Sie Google Tag Manager auf Shopify

Hier ist die schrittweise Anleitung zum Hinzufügen von GTM zu Shopify:

Methode 1: Google Tag Manager mithilfe der Google & YouTube App installieren (einfacher)

Diese Methode wird empfohlen, wenn Sie ein schnelle Einrichtung mit minimaler Konfiguration.

Schritt 1: Zurück Nach Shopify Apps Store → Google & YouTube. Klicken Sie Installieren.

Schritt 2: Nach der Installation klicken Sie auf Google-Konto verbinden um Ihr Google Ads-Konto zu verbinden und das Conversion-Tracking zu aktivieren.

Schritt 3: Geben Sie Ihre GTM-Container-ID wenn Sie dazu aufgefordert werden.

Schritt 4: Wählen Sie, welche Tags zum Aktivierenwie beispielsweise Analytics 4, Anzeigen oder Konversionsereignisse.

Schritt 5: Schließen Sie die Einrichtung ab und Überprüfung der Tag-Auslösung mit GTM Preview oder Google Tag Assistant.

Einschränkungen dieser Methode

• Weniger Kontrolle über erweiterte oder benutzerdefinierte Ereignisse
• Nicht ideal, wenn Sie GTM intensiv mit benutzerdefinierten Abzügen nutzen möchten.

Methode 2: Google Tag Manager manuell installieren (Empfohlen für erweitertes Tracking)

Diese Methode bietet volle Kontrolle und wird empfohlen, wenn Sie:

• Benutzerdefinierte Ereignisse verwenden
• Verfolgen Sie Interaktionen auf GemPages-Seiten
• Ich möchte volle Flexibilität innerhalb von GTM.

Schritt 1: Öffnen Sie Ihren Theme-Code.

1. Gehen Sie im Shopify-Adminbereich zu Online-Shop → Themen
2. Klicken Sie auf ⋯ → Code bearbeiten
3. Öffnen Sie die Datei layout/theme.liquid

Schritt 2: Fügen Sie das GTM-Skript hinzu

Fügen Sie den folgenden Code ein. unmittelbar nach der Öffnung Etikett:

<!-- 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','GTM-XXXXXXX');
</script>
<!-- End Google Tag Manager -->
  

Schritt 3: Fügen Sie nach dem GTM-Noscript Folgendes hinzu:

Fügen Sie in dieselbe Datei den folgenden Code ein. unmittelbar nach der Öffnung Etikett:

<!-- Google Tag Manager (noscript) -->

<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

<!-- End Google Tag Manager (noscript) -->
  

Schritt 4: Speichern Sie Ihre Änderungen

Klicken Sie auf Gespeichert um die Änderungen in Ihrem Live-Shop zu veröffentlichen.

Verwendung des Google Tag Managers mit GemPages-Seiten

Wenn GTM korrekt installiert ist, funktioniert es automatisch auf allen Seiten, die mit GemPagesdarunter:

• Landing Pages
  
• Produktseiten
• Sammlungsseiten

Sie können GTM für Folgendes verwenden:

• Klicks auf Schaltflächen mithilfe von CSS-Selektoren verfolgen
• Formularübermittlungen von GemPages-Formularelementen verfolgen
• Ereignisse basierend auf Benutzerinteraktionen auslösen, ohne den Seitencode zu bearbeiten

In GemPages ist keine zusätzliche Konfiguration erforderlich.

Shopify Checkout-Einschränkungen

Shopify schränkt das Tracking innerhalb des Bezahlvorgangs je nach Ihrem Tarif ein:

• Shopify Basic, Shopify, Advanced: GTM tut nicht vollständig geladen auf den Checkout-Seiten. Die Nachverfolgung von Käufen ist eingeschränkt.
• ShopifyPlus: GTM kann dem Checkout hinzugefügt werden mit Kasse.liquid oder Checkout-Erweiterbarkeit, die eine vollständige Nachverfolgung des Kaufvorgangs ermöglicht.

Diese Einschränkung wird von Shopify gesteuert, nicht von GemPages oder GTM.

So testen Sie Ihre GTM-Installation

Sie können die Funktionsfähigkeit von GTM mit beiden Methoden überprüfen:

Option 1: GTM-Vorschaumodus

1. Öffnen Sie den Google Tag Manager
2. Klicken Sie auf Vorschau
3. Geben Sie Ihre Shop-URL ein
4. Vergewissern Sie sich, dass Tag Assistant erfolgreich eine Verbindung hergestellt hat.

Option 2: Seitenquelltextprüfung

• Eröffnen Sie Ihr Ladengeschäft
• Rechtsklick → Seitenquelle anzeigen
• Suchen Sie nach GTM-

Häufige Probleme und Fehlerbehebung

• Installieren Sie GTM nicht zweimal: Vermeiden Sie die gleichzeitige Verwendung der Google- und YouTube-App sowie die manuelle Code-Einschleusung.
• Vermeiden Sie die Vermischung von direkten GA4-Skripten mit GTM: Nutzen Sie GTM als einzige Tracking-Quelle, um doppelte Ereignisse zu vermeiden.
• Tags immer vor der Veröffentlichung testen: Verwenden Sie den Vorschaumodus, um zu überprüfen, ob Ereignisse korrekt ausgelöst werden.