Benutzerdefinierte Pixel hinzufügen

Wenn es keine App gibt, um die spezifischen Kundenereignisse zu verfolgen, für die du Daten erheben möchtest, kannst du ein benutzerdefiniertes Pixel hinzufügen, das in einer lockeren Sandbox-Umgebung ausgeführt wird.

Wenn du ein benutzerdefiniertes Pixel hinzufügst, musst du die folgenden Informationen angeben:

  • das JavaScript-Pixel eines Drittanbieters
  • die verhaltensorientierten Ereignisse, die du verfolgen möchtest

Pixel-Code des Drittanbieters vorbereiten

Der Drittanbieter-Dienst, mit dem du arbeitest, stellt dir den Code zur Verfügung, der in das Pixel integriert ist. Ein Pixel hat in der Regel zwei Komponenten, ein SDK und den Tracking-Code. Jede HTML im Service-Code des Drittanbieters muss entfernt werden, da die Shopify-Pixel-Sandbox nur JavaScript unterstützt.

Hier ist ein Beispiel für ein Meta-Pixel. Beachte, dass Pixel leicht von einem Unternehmen zum nächsten abweichen.

​​<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

Nach dem Entfernen der HTML aus dem Meta-Code bleiben das Pixel-SDK und der Code von Meta zum Initialisieren. Der Tracking-Code für PageView-Ereignisse wurde ebenfalls entfernt, da er im nächsten Schritt hinzugefügt wird.

​​!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

Möglicherweise findest du Pixel, die mit script src= geladen werden. HTML wird in den Pixeln von Shopify nicht unterstützt, daher musst du diese durch das JavaScript-Äquivalent ersetzen.

Hier ist ein Beispiel für ein Google Analytics-Pixel:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

Der Teil script src= kann durch das nachfolgende JavaScript-Äquivalent ersetzt werden. Stelle immer sicher, dass dein src-Attribut der HTML-Version entspricht:

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

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

Standard-Ereignisse abonnieren

Nachdem das Pixel-SDK geladen und initialisiert wurde, musst du die Ereignisse für die Verfolgung darauf übertragen. Dies geschieht, indem du Ereignisse abonnierst und die Ereignisdaten anschließend an das SDK des Pixels weitergibst, damit sie vom Drittanbieter verarbeitet werden können.

Shopify bietet eine Reihe von Standard-Ereignissen, mit denen sich leicht sicherstellen lässt, dass dein Pixel die benötigten Daten erhebt.

Du kannst Ereignisse mithilfe der Pixel-Erweiterungs-API von Shopify abonnieren. Du musst den Pixel-Code des Drittanbieters in das Ereignis, das du abonnierst, eingeben.

Dies ist ein Beispiel für das PageView-Ereignis für das Pixel von Meta. Beachte, dass fbq("track") Teil des Meta-Codes ist und jedes Unternehmen seine eigene Version hat, für die du seine Dokumentation zurate ziehen musst.

analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

Einige Ereignisse enthalten Metadaten, die du an dein Pixel weitergeben kannst. Hier ist ein Beispiel für die Weitergabe einiger Produktdetails an das ViewContent-Ereignis von Meta:

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Benutzerdefiniertes Pixel hinzufügen

Entferne vor dem Hinzufügen eines benutzerdefinierten Pixels alle vorhandenen Pixel, um sicherzustellen, dass Kundenereignisse nicht zweimal gezählt werden. Bestehender Pixel-Code sollte von jedem Ort, an dem er existiert, manuell entfernt werden, z. B. in theme.liquid, checkout.liquid (Nur Plus-Händler) und in anderen Checkout-Skripten.

  1. Gehe in deinem Shopify-Adminbereich zu Einstellungen > Kundenereignisse.
  2. Gib deinem Pixel einen eindeutigen Namen. Wenn du den Namen eines benutzerdefinierten Pixels eingibst, das bereits vorhanden ist, wirst du aufgefordert, deinem Pixel einen anderen Namen zu geben.
  3. Klicke auf Pixel hinzufügen, um den Ereignis-Editor zu öffnen.
  4. Füge das JavaScript-Pixel eines Drittanbieters in das Fenster Code ein.
  5. Füge die Ereignisse hinzu, die du im entsprechenden Schema verfolgen möchtest.
  6. Optional: Klicke auf Weitere Aktionen, um deinen Pixelnamen zu bearbeiten oder Informationen dazu anzuzeigen, wie du einen Shopify-Experten für Unterstützung mit deinen benutzerdefinierten Pixeln engagierst.
  7. Klicke auf Speichern, um dein benutzerdefiniertes Pixel zu speichern. Wenn du dein benutzerdefiniertes Pixel jetzt verbinden kannst, klicke auf Pixel verbinden, um mit der Verfolgung deiner Ereignisse zu beginnen.

Ein benutzerdefiniertes Pixel verbinden

Sobald ein benutzerdefiniertes Pixel hinzugefügt wurde, musst du das Pixel mit deinem Shop verbinden.

  1. Klicke auf der Seite für Kundenereignisse in deinem Shopify-Adminbereich auf Benutzerdefinierte Pixel.
  2. Benutzerdefinierte Pixel, die aktuell nicht verbunden sind, werden unter der Überschrift Getrennte Pixel angezeigt. Klicke auf Verbinden in der Zeile des entsprechenden benutzerdefinierten Pixels.
  3. Lies die allgemeinen Geschäftsbedingungen von Shopify. Wenn dein Pixel die Service-Anforderungen erfüllt, klicke auf Verbinden.

Beispiele für benutzerdefinierte Pixel

Benutzerdefiniertes Meta-Pixel

​​!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

analytics.subscribe("search_submitted", event => {
  fbq('track', 'Search', {
    search_string: event.search_value
  });
});

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

analytics.subscribe("payment_info_submitted", event => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", event => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", event => {
  fbq('track', 'PageView');
});

Benutzerdefinierte Pixel trennen

Wenn du die Verfolgung der Ereignisse, für die du ein benutzerdefiniertes Pixel hinzugefügt hast, stoppen möchtest, musst du das Pixel manuell von deinem Onlineshop trennen.

Schritte:

  1. Klicke auf der Seite für Kundenereignisse in deinem Shopify-Adminbereich auf Benutzerdefinierte Pixel.
  2. Benutzerdefinierte Pixel, die derzeit verbunden sind, werden oben in deiner Liste mit benutzerdefinierten Pixeln angezeigt. Klicke auf Trennen in der Zeile des entsprechenden benutzerdefinierten Pixels. Durch das Trennen des Pixels wird das Pixel nicht gelöscht.

Benutzerdefinierte Pixel löschen

Du kannst benutzerdefinierte Pixel löschen, die du nicht mehr benötigst.

Schritte:

  1. Klicke auf der Seite für Kundenereignisse in deinem Shopify-Adminbereich auf Benutzerdefinierte Pixel.
  2. Klicke auf die Schaltfläche ... in der Zeile des entsprechenden benutzerdefinierten Pixels.
  3. Klicke auf Löschen. Bestätige den Löschvorgang, dann wird das benutzerdefinierte Pixel aus dem Pixel-Manager entfernt.

Das Löschen eines benutzerdefinierten Pixels kann nicht rückgängig gemacht werden. Vergewissere dich also, dass du das richtige Pixel löschst.

Bereit, mit Shopify zu verkaufen?

Kostenlos testen