Benutzerdefinierten Pixel-Code erstellen

Diese Seite wurde gedruckt um Apr 19, 2024. Die neueste Version findest du unter https://help.shopify.com/de/manual/promoting-marketing/pixels/custom-pixels/code.

Diese Seite enthält Anweisungen zur Erstellung eines benutzerdefinierten Pixel-Codes 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.

Auf dieser Seite

Die Erstellung eines benutzerdefinierten Pixels vorbereiten

Bevor du ein benutzerdefiniertes Pixel erstellst, solltest du die folgenden Informationen überprüfen, um sicherzustellen, dass du verstehst, wie dein Pixel konfiguriert 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

Code für ein benutzerdefiniertes Pixel erstellen

Das Erstellen des Codes für ein benutzerdefiniertes Pixel umfasst die folgenden Schritte:

  1. Bereite das JavaScript-SDK eines Drittanbieters vor.
  2. Konfiguriere dein Pixel so, dass Kundenereignisse verfolgt werden.

JavaScript-SDK eines 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 Javascript-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. Pixel unterscheiden sich geringfügig von einem Drittanbieter zum anderen.

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

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Möglicherweise findest du Pixel, 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:

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

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Kundenereignisse verfolgen

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.

Standard-Ereignisse abonnieren

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", async (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", 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 genauso abonniert werden wie Standard-Ereignisse. Erkläre den Namen des Ereignisses, das du abonnieren möchtest, und übermittle die Informationen an das Pixel des Drittanbieters.

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

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

Das ist ein Beispiel dafür, wie du dein Pixel konfigurieren kannst, 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 zur benutzerdefinierten Ereignissen findest du in der Entwicklerdokumentation von Shopify.

Web-Pixel werden nur ausgeführt, wenn Besucher ihre Zustimmung zu Marketing- und Analysezwecken in Märkten erteilt haben, in denen du die Einwilligung als erforderlich konfiguriert hast. Jedes Pixel kann für jeden Zweck einen anderen Namen haben. Du solltest die Pixeldokumentation lesen, um zu verstehen, wie sie zu den Definitionen von Shopify zugeordnet werden.

Die Marketing- und Analysezwecke werden beispielsweise auf die folgende Weise zu Google Consent Mode zugeordnet:

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

Beispiel für benutzerdefinierte Pixel

Unten ist ein Beispiel für den Code für ein Meta-Pixel. 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.

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,
  });
});

Bereit, mit Shopify zu verkaufen?

Kostenlos testen