Kundenereignisse

[lea-faschinger]

Ich habe eine Frage zu den "Kundenereignissen" ist dieses Tool nur als Sandbox gedacht oder soll man hier einfach alle Trackingcodes eintragen? Es gibt keinen Sinnvollen shopify.dev Eintrag dazu.

Habe mich an diese Anleitung gehalten:

https://help.shopify.com/de/manual/promoting-marketing/pixels/custom-pixels/code

Ich versuche seit Freitag die Trackingcodes hier einzutragen, aber kein Tag feuert. Auch im Quelltext etc finde ich keinen Hinweis das mein Code irgendwo erscheint?

Auch funktionen wie (Klicke den Button -> dann erscheint in der Console "Works") scheinen nicht zu funktionieren.

Spoiler

// Schritt 1. Füge dein JavaScript-Pixel eines Drittanbieters hinzu (achte darauf, HTML auszuschließen) und initialisiere es



// Schritt 2. Abonniere Kundenereignisse mithilfe der analytics.subscribe() API
//  analytics.subscribe("event_name", event => {
//    pixel("track", "event_name", event.data);
//  });



const script = document.createElement("script");
script.setAttribute("src", "https://www.googletagmanager.com/gtag/js?id=AW-xxx");
script.setAttribute("async", "");
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "AW-xxx");


const Analyzify = {
  getItemsFromLineItems(lineItems) {
    let items = []
    for (const item of lineItems) {
      items.push({
        item_id: item.variant.product.id,
        item_name: item.variant.product.title,
      })
    }
  
    return items
  },

  getPageViewData(evt) {
    let ctx = evt.context
    return {
      send_to: "AW-xxx",
      page_location: ctx.document.location.href,
      page_title: ctx.document.title,
      language: ctx.language,
      google_business_vertical: retail,
      
    }
  },

  getViewItemData(evt) {
    return {
      currency: evt.data.productVariant.price.currencyCode,
      value: evt.data.productVariant.price.amount,
      items: [{ item_id: evt.data.productVariant.id, item_name: evt.data.productVariant.product.title }],
    }
  },

 getAddToCartData(evt) {
    return {
      send_to: "AW-xxx",
      currency: evt.data.cartLine.merchandise.price.currencyCode,
      value: evt.data.cartLine.merchandise.price.amount,
      items: [{ item_id: evt.data.cartLine.merchandise.id, item_name: evt.data.cartLine.merchandise.product.title }],
    }
  },

  getPaymentInfoData(evt) {
    return {
      currency: evt.data.checkout.currencyCode,
      value: evt.data.checkout.totalPrice.amount,
      items: this.getItemsFromLineItems(evt.data.checkout.lineItems),
    }
  },

  getCheckoutData(evt) {
    return {
      send_to: "AW-xxx",
      currency: evt.data.checkout.currencyCode,
      value: evt.data.checkout.totalPrice.amount,
      items: this.getItemsFromLineItems(evt.data.checkout.lineItems),
    }
  },

  getCheckoutCompletData(evt) {
    return {
      transaction_id: evt.data.checkout.order.id,
      currency: evt.data.checkout.currencyCode,
      value: evt.data.checkout.totalPrice.amount,
      items: this.getItemsFromLineItems(evt.data.checkout.lineItems),

    }
  }
}


analytics.subscribe("product_viewed", async (event) => {
  gtag("event", "view_item", Analyzify.getViewItemData(event));
});

analytics.subscribe("search_submitted", async (event) => {
  gtag("event", "search", {
    search_term: event.data.searchResult.query,
  });
});



analytics.subscribe("product_added_to_cart", async (event) => {
  gtag("event", "add_to_cart", Analyzify.getAddToCartData(event));
});


analytics.subscribe("payment_info_submitted", async (event) => {
  gtag("event", "add_payment_info", Analyzify.getPaymentInfoData(event));
});

analytics.subscribe("checkout_started", async (event) => {
  gtag("event", "begin_checkout", Analyzify.getCheckoutData(event) );
});

analytics.subscribe("checkout_completed", async (event) => {
  gtag("event", "purchase", Analyzify.getCheckoutCompletData(event));
});

Natürlich habe ich die originalen AW Codes im originalen Code.

Viele Dank schonmal für die Hilfe.

@Gabe @Finer @Kai 

[Gabe]

Hey @lea-faschinger 

Das neue Kundenereignisse und Pixel Tool ist ein Tool, mit dem man Skripte hinzufügen kann, die Kundenereignisse clientseitig in einem Online-Shop, an der Kasse und auf der Bestellstatusseite verfolgen und mit Analyse- und Marketing-Apps teilen. Derzeit kann man Kunden-Tracking-Javascript an verschiedenen Stellen im Adminbereich hinzufügen. Die Pixel werden nun konsolidiert und sind im neuen Abschnitt "Kundenereignisse" in den Admin-Einstellungen zu finden.

Pixel können auf zwei Arten hinzugefügt werden:

1. Über Marketing-Apps (sogenannte App-Pixel in Kundenereignissen - Pixel aus Apps werden automatisch zu diesem Index hinzugefügt, sofern die App/der Kanal die Pixel App Web Extension API nutzt).
2. Über benutzerdefinierte Pixel, die in den Einstellungen der Kundenereignisse manuell eingegeben werden.

Man kann die Pixel-Erweiterungs-API nutzen, um Apps zu erstellen, die App-Pixel nutzen, während benutzerdefinierte Pixel direkt in einem Standard-Codeblock erstellt werden, der in Kundenereignissen zu finden ist, wenn ein benutzerdefiniertes Pixel erstellt wird.

Die Vorteile:

1. Zentrale Verwaltung - Verwalte alle Kundenereignisse von einem Ort aus in der Verwaltung. Pixel von Apps, Werbeplattformen (z. B. Google Ads) und benutzerdefinierten Apps können alle hier gefunden werden.
2. Sicher und zuverlässig - Unser Web-Pixel-Manager ist eine sichere, stabile und leistungsfähige Alternative zu Tag-Managern von Drittanbietern, um Marketing- und Analyse-Pixel zu integrieren. Die Pixel werden in einer Sandbox ausgeführt, die deinen Online-Shop und deine Kasse vor fehlerhaftem oder bösartigen Code schützt und Pixelaktivitäten kontrolliert, die die Leistung beeinträchtigen könnten.
3. Verbesserte Datenqualität und Datenschutz - verwende vorgefertigte Kundenereignisse, um zuverlässig auf genaue und relevante Kundeninformationen für Marketing und Berichte zuzugreifen. Bei gleichzeitiger Berücksichtigung und Schutz der Kundendaten.

Wie man es macht:

Um Pixel hinzuzufügen, gibt es zwei Möglichkeiten: entweder über eine App oder über ein benutzerdefiniertes Pixel:

1. App-Pixel - Installiere die App > Überprüfe die Berechtigung (die Verhaltensdaten werden als Pixeldaten bezeichnet) > Verbinde Konto/Pixel (variiert je nach Drittanbieter-App).
2. Benutzerdefinierte Pixel - Gehe zu Einstellungen > Kundenereignisse > Benutzerdefinierte Pixel hinzufügen > Pixelname > Pixel in Codeblock eingeben > Pixel verbinden (bei benutzerdefinierten Pixeln unterstützt Shopify keine Pixel von Drittanbietern und garantiert auch nicht, dass diese funktionieren, d. h. die Händler müssen die Funktion ihrer Pixel bei ihrem Anbieter überprüfen).

FAQ

• Warum feuern die Ereignisse nicht?  
  Du kannst console.log in deinen Code einfügen, um zu testen, ob die Ereignisse ausgelöst werden. Wenn das nicht der Fall ist, prüfe welche Datenschutz des Kunden Einstellungen du aktiviert hast (Theme -> Konfigurationen -> Datenschutz des Kunden) denn diese können deine Pixel und das Tracking blockieren.
• Woher weiß ich, ob der Pixel funktioniert?
  Jeder Drittanbieter verfügt über unterschiedliche Methoden, um festzustellen, ob der Pixel korrekt implementiert ist. Einige bieten Browser-Plugins und Überwachungs-Dashboards in ihren jeweiligen Schnittstellen an. Du kannst auch versuchen, die Webanfragen in deiner Browserkonsole auf Anfragen des Pixels zu überprüfen. Wende dich an den Drittanbieter, um genauere Anweisungen zu erhalten.
• Ist das jetzt die einzige Möglichkeit, Pixel zu verwenden? Kann ich weiterhin den Theme-Code verwenden? Kann ich weiterhin den Google Tag Manager verwenden?
  Der Vorteil der Webpixel-Lösung von Shopify ist der Zugang zum Checkout und die sofortige Einhaltung der Vorschriften. Man kann aber weiterhin Themes zum Laden von Pixeln oder den Google Tag Manager verwenden. Allerdings sollte man die Einrichtung mit den Drittanbietern testen und überprüfen. 
• Du hast App oder Verkaufskanal X installiert und siehst kein App-Pixel im Kundenereignisbereich?
  App-/Verkaufskanäle müssen die Pixel App Web Extension API integrieren, bevor ihre App/Verkaufskanäle als App-Pixel angezeigt werden können. Da die Funktion erst im 4. Quartal 2022 eingeführt wurde, kann es einige Zeit dauern, bis sie von unseren Partner-Apps/-Kanälen angenommen wird. Bis dahin ist eine andere Lösung, wie z. B. benutzerdefinierte Pixel, erforderlich. 

---
Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community. Du musst in der Benachrichtigungs-E-Mail auf „Antworten“ tippen oder klicken, um eine neue Nachricht zu verfassen. Schreibe in dieser Nachricht deine Antwort und klicke oder tippe dann auf „Senden“, um deine Antwort in der Community zu posten.

Unsere Community unterstützt es nicht, direkt auf eine Benachrichtigungs-E-Mail zu antworten, weshalb deine Antwort in dieser E-Mail nicht in der Community veröffentlicht werden könnte und wir sie nicht sehen, was schade wäre.

Lass auch wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
 
Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 5 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:

• https://forms.gle/SSVUmn5vXLYYW9Dh8

[Gabe]

@lea-faschinger 

Hat das geklappt?

[lea-faschinger]

Hallo Gabe,

nein es hat nicht geklappt.

Wir haben die Trackings jetzt in den Head eingesetzt und und über funktionen. Es hat einfach nicht geklappt.