Benutzerdefinierten Pixel-Code erstellen

Achtung

Benutzerdefinierte Pixel sind eine erweiterte Funktion, die JavaScript-Kenntnisse erfordert. Die Einhaltung der geltenden Gesetze, die Einholung von Einwilligungen, die Sicherheit des Codes, die Fehlerbehebung sowie die Durchführung von Updates liegen in deiner Verantwortung. Pixel unterliegen den Nutzungsbedingungen von Shopify.

Das Hinzufügen und Verwenden von benutzerdefinierten Pixeln wird von Shopify nicht unterstützt. Wenn du beim Hinzufügen oder Verwenden eines benutzerdefinierten Pixels Hilfe benötigst, kannst du einen Shopify Partner beauftragen.

Diese Seite enthält Anweisungen zur Erstellung von benutzerdefiniertem Pixel-Code für ein Drittanbieter-Pixel, damit du bestimmte Kundenereignisse verfolgen kannst. Nachdem du den Code für dein benutzerdefiniertes Pixel erstellt hast, kannst du das Pixel zu deinem Shopify-Shop hinzufügen.

Hinweis

Bevor du ein benutzerdefiniertes Pixel erstellst, solltest du die verfügbaren Apps überprüfen, um von einer besseren Stabilität, Sicherheit und Leistung zu profitieren. Wenn es jedoch keine App gibt, die deinen Anforderungen entspricht, kannst du ein benutzerdefiniertes Pixel erstellen.

Vorbereitung auf die Erstellung eines benutzerdefinierten Pixels

Bevor du ein benutzerdefiniertes Pixel erstellst, lies die folgenden Informationen, um sicherzustellen, dass du verstehst, wie du dein Pixel konfigurieren musst:

• Mit Pixeln verbundene Risiken.
• Einschränkungen der Pixel-Sandbox von Shopify.
• Verwendung der Pixel-Sandbox-API von Shopify.
• Schema für das Tracking von Kundenereignissen.

Wenn du ein benutzerdefiniertes Pixel hinzufügst, gibst du die folgenden Informationen an:

• Das JavaScript-Drittanbieter-Pixel.
• Die Verhaltensereignisse, die du verfolgen möchtest.
• Die Einwilligungseinstellungen für den Kundendatenschutz.

Code für ein benutzerdefiniertes Pixel erstellen

Dein Geschäft ausbauen

Dies ist ein Tutorial für Fortgeschrittene und wird von Shopify nicht unterstützt. Wenn du Hilfe beim Hinzufügen eines benutzerdefinierten Pixels benötigst, kannst du einen Shopify Partner beauftragen.

Die Erstellung des Codes für ein benutzerdefiniertes Pixel umfasst die folgenden Schritte:

1. Das Drittanbieter-JavaScript-SDK vorbereiten.
2. Konfiguriere dein Pixel, um Kundenereignisse zu verfolgen.
3. Konfiguriere die Einwilligungseinstellungen für den Kundendatenschutz für dein Pixel.

Vorbereitung des Drittanbieter-JavaScript-SDK

Der Drittanbieterdienst, mit dem du arbeitest, stellt dir den Code zur Verfügung, der in das Pixel integriert wird. Ein Pixel besteht in der Regel aus zwei Komponenten: einem JavaScript-SDK und dem Tracking-Code. Jegliches HTML im Code des Drittanbieterdienstes muss entfernt werden, da die Pixel-Sandbox von Shopify nur JavaScript unterstützt.

Hier ist ein Beispiel für ein Meta-Pixel. Pixel unterscheiden sich je nach Drittanbieter geringfügig.

​​<!-- 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 -->

Nachdem das HTML aus dem Code von Meta entfernt wurde, bleiben das Pixel-SDK von Meta und der Code zur Initialisierung übrig. Der Tracking-Code für das PageView-Ereignis 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);

Das Pixel-SDK von Meta überträgt Daten von einem benutzerdefinierten Shopify-Pixel nicht automatisch. Um Daten zu übertragen, musst du Ereignisse abonnieren.

Es kann sein, dass du auf Pixel stößt, die mit script src= geladen werden. HTML wird in den Pixeln von Shopify nicht unterstützt, daher musst du script src= durch das JavaScript-Äquivalent ersetzen.

Hier ist ein Beispiel für ein Google-Analytics-Pixel, das mit script src= geladen wird:

<!-- 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 JavaScript-Äquivalent ersetzt werden. Stelle immer sicher, dass dein src-Attribut mit der HTML-Version übereinstimmt:

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');

Das Pixel-SDK von Google überträgt nicht automatisch Daten von einem benutzerdefinierten Shopify-Pixel. Um Daten zu übertragen, musst du Ereignisse abonnieren.

Kundenereignisse verfolgen

Nach dem Laden und Initialisieren des Pixel-SDKs musst du Ereignisse zur Nachverfolgung daran übergeben. Dazu abonnierst du Ereignisse und übergibst die Ereignisdaten anschließend an das Pixel-SDK, damit sie vom Dienst des Drittanbieters verarbeitet werden.

Standardereignisse abonnieren

Shopify bietet eine Reihe von Standardereignissen, die es einfach machen, sicherzustellen, dass dein Pixel die benötigten Daten erfasst.

Du kannst Ereignisse über die Shopify Pixels Extension API abonnieren. Du musst den Pixel-Code des Drittanbieters bei dem Ereignis platzieren, das du abonnierst.

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

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

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

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

Benutzerdefinierte Kundenereignisse abonnieren

Wenn du zusätzliche Kundenereignisse verfolgen möchtest, z. B. wenn jemand auf eine Schaltfläche klickt, kannst du benutzerdefinierte Kundenereignisse hinzufügen. Benutzerdefinierte Ereignisse können auf die gleiche Weise wie Standardereignisse abonniert werden. Gib den Namen des Ereignisses an, das du abonnieren möchtest, und gib die Informationen an das Pixel des Drittanbieters weiter.

Dies ist ein Beispiel dafür, wie ein veröffentlichtes benutzerdefiniertes Ereignis in den Liquid-Dateien deines Themes aussehen könnte:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Dies ist ein Beispiel dafür, wie du dein Pixel konfigurieren könntest, um dieses benutzerdefinierte Ereignis zu abonnieren:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Weitere Informationen zu benutzerdefinierten Ereignissen findest du in der Shopify Developer Documentation.

Einstellungen für Einwilligung und Datenverkauf konfigurieren

Hinweis

Du bist für die Einhaltung der Datenschutzbestimmungen selbst verantwortlich und solltest dich rechtlich beraten lassen, um festzustellen, wie sich die Gesetze in deiner Region und in der Region, in der du verkaufst, auf dein Geschäft auswirken könnten. Um Produkte über die Shopify-Plattform zu verkaufen, musst du die Gesetze der Rechtsprechung deines Unternehmens und deiner Kundschaft, die Nutzungsbedingungen von Shopify, die Richtlinie zur Fairen Nutzung von Shopify und alle anderen geltenden Richtlinien einhalten. Erfahre mehr über den Datenschutz für Kund:innen.

In Märkten, die so konfiguriert sind, dass sie eine Einwilligung erfordern, wie z. B. dem Europäischen Wirtschaftsraum (EWR) und dem Vereinigten Königreich, werden Webpixel nur ausgeführt, wenn die Website-Besucher:innen die in der Pixel-Konfiguration erforderlichen Berechtigungen erteilt haben.

Standardmäßig erfordern neue benutzerdefinierte Pixel die Berechtigungen für Marketing und Statistiken. Du kannst im Abschnitt Datenschutz für Kund:innen > Berechtigung in den Details deiner benutzerdefinierten Pixel anpassen, welche Berechtigungen erforderlich sind.

Ebenso werden Pixel, die als Datenverkauf konfiguriert sind, nicht für Kund:innen ausgeführt, die dem Verkauf oder der Weitergabe von Daten widersprochen haben, es sei denn, das Pixel unterstützt die eingeschränkte Datennutzung. Standardmäßig gelten neue benutzerdefinierte Pixel als Datenverkauf. Du kannst im Abschnitt Datenschutz für Kund:innen > Datenverkauf in den Details deiner benutzerdefinierten Pixel anpassen, ob die erfassten Daten als Datenverkauf gelten.

Entwickler:innen von benutzerdefinierten Pixeln können mehr über das Einholen und Registrieren von Einwilligungen erfahren.

Jedes Pixel kann für jeden Zweck einen anderen Namen haben. Du solltest die Pixel-Dokumentation des Drittanbieters zu Rate ziehen, um zu verstehen, wie diese Namen den Definitionen von Shopify zugeordnet sind.

Im Folgenden siehst du beispielsweise, wie die Zwecke Marketing und Analyse dem Consent Mode von Google zugeordnet werden:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

Beispiel für ein benutzerdefiniertes Pixel

Unten findest du ein Beispiel für den Code eines Meta-Pixels. Der Pixel-Code variiert je nach Drittanbieter und den Ereignissen, die du verfolgen möchtest. Eine Liste der verfügbaren Ereignisse findest du in der Referenz für Kundenereignisse.

Beispiel für ein 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');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids:  [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

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

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

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

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

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});