Anleitung: Shopware Facebook Pixel einbinden

Im heutigen Ratgeber möchten wir Ihnen erklären, wie Sie in Shopware den Facebook Pixel einbinden können. Es gibt zwar diverse Plugins, die teilweise gut funktionieren und Ihnen diese Arbeit abnehmen, aber dies lässt sich mit etwas Arbeit auch ganz einfach selbst realisieren. Hier lesen Sie, wie Sie den Facebook Pixel selbst in Shopware einfügen können.

Die Vorbereitung zur Facebook Pixel Einbindung in Shopware

Facebook Pixel erstellen im Werbeanzeigen-Manager

Zunächst benötigen Sie natürlich einen Facebook Pixel. Diesen bekommen Sie im Facebook Werbeanzeigen-Manager. Dort bekommen Sie auch schon diverse Einbindungshilfen und Implementierungsmöglichkeiten, die Sie nutzen können. Doch leider ist dies auf allgemeine Webseiten bzw. Webshops bezogen und nicht speziell auf Shopware - was aber nicht weiter schlimm ist. Jedenfalls erhalten Sie zunächst Ihre Facebook-Pixel-ID. Mit folgendem Code können Sie Ihren individuellen Pixel nutzen:

<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', 'IHRE ID');
 fbq('track', 'PageView');
</script>

So, oder so ähnlich, sollte nun Ihr Facebook-Pixel-Code aussehen. Für IHRE ID setzen sie selbstverständlich Ihre angezeigte ID ein. Diese Script sorgt dafür, dass Facebook die Events in Ihrem Shop tracken kann. Nun geht es im Shopware Theme weiter.

Einbindung im Shopware Theme

Nun geht es an die Einbindung des Facebook Pixels in Ihr Shopware Theme. Wichtig hierbei ist, dass Sie die Änderungen nicht im Standard-Theme "Responsive" vornehmen, sondern in einem abgeleiteten Theme. Diese erhalten Sie, indem Sie im Shopware Backend Ihres Shops über den Theme-Manager eine neue Theme-Ableitung des Themes "Responsive" erstellen. Über ein FTP-Programm, wie bspw. Filezilla, erhalten Sie nun darauf Zugriff. Sie sehen im Verzeichnis "themes" nun Ihr abgeleitetes Theme. Darin finden Sie nun leere Verzeichnisse. Dort kommen nun die abgeänderten Dateien des Standard-Themes rein.

Wir starten zunächst mit der Einbindung des Facebook-Pixel im Head-Bereich Ihres Shopware Themes. Shopware nutzt Dateien, die auf .tpl enden. Erstellen Sie über einen HTML-Editor eine Datei namens header.tpl mit folgendem Inhalt:

{extends file="parent:frontend/index/header.tpl"}
{/block}
{block name="frontend_index_header_javascript_tracking" append}
<!-- Facebook Pixel Code -->
{literal}
<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', 'IHRE-ID');
 fbq('track', 'PageView');
 fbq('track', 'ViewContent');
</script>
<noscript><img height="1" width="1" style="display:none" alt="fb-pixel" src="https://www.facebook.com/tr?id=1204919199542628&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
{/literal}
{/block}

Diese header.tpl speichern Sie nun ab und laden diese über Ihr FTP-Programm in Ihren neuen Theme Ordner in das folgende Verzeichnis: IhrThemeName/frontend/index/header.tpl

Diese Datei sorgt dafür, dass die originale Theme-Datei um die hier geschriebenen Codezeilen erweitert werden. Somit können Sie auch in Zukunft ohne Probleme updaten und der Facebook-Pixel bleibt weiterhin aktiv. Der Befehl {literal} ist übrigens sehr wichtig! Dieser sorgt dafür, dass sämtliche Codezeilen zwischen "literal" von Shopware als Script-Code gelesen werden können. Daher ist es unabdingbar, da es sonst nicht funktionieren wird. Jetzt müssen Sie nur noch Ihr Theme aktivieren, kompilieren und den Cache leeren. Nun sollte Ihr Facebook-Pixel aktiv sein. Dies können Sie auf verschiedene Arten prüfen. Zunächst einmal besteht die Möglichkeit, dass Ihr auf der Startseite Eures Shops im Browser via Rechtsklick den Quelltext anzeigen lassen könnt. Mittels STRG+F können Sie nun nach "Facebook" suchen. Nun sollte der eben eingebundene Facebook-Pixel sichtbar werden. Alternativ gibt es noch den Facebook-Pixel Checker für Google Chrome, der Ihnen live auf sämtlichen Seiten die Pixel-Aktivitäten anzeigt. Nun sollte der Facebook-Pixel aktiv sein. Jetzt haben Sie die Möglichkeit sogenannte Events des Facebook-Pixels zu tracken. Das heißt Sie können nun bestimmte Aktivitäten des Nutzers "beobachten". Diese Events werden Ihnen im nächsten Absatz näher erläutert.

Facebook Pixel für Shopware ausbauen

In unserem Beispiel möchten wir folgenden Events tracken:

  • Ein Nutzer hat etwas in den Warenkorb gelegt
  • Ein Nutzer hat Zahlungsdaten eingegeben
  • Ein Nutzer hat einen Kauf erfolgreich abgeschlossen

Um dies realisieren zu können, müssen Sie die eben erwähnten Events in den jeweiligen Theme-Dateien hinzufügen. Im Folgenden zeigen wir Ihnen die Dateien und Events, welche Sie erstellen und in Ihr abgeleitetes Theme hochladen müssen:

Shopware Nutzer hat etwas in den Warenkorb gelegt

Erstellen Sie die Datei ajax_cart.tpl und laden diese in Ihr Theme in frontend/checkout/ajax_cart.tpl hoch.

{extends file="parent:frontend/checkout/ajax_cart.tpl"}

{block name='frontend_checkout_ajax_cart_buttons_offcanvas' prepend}
 {literal}
 <script>
 fbq('track', 'AddToCart');
 </script>
 {/literal} 
 {/block}

Shopware Nutzer einen kauf erfolgreich abschließt

{extends file="parent:frontend/checkout/confirm.tpl"}
{block name='frontend_index_content_left' prepend}
{literal}
<script>
fbq('track', 'InitiateCheckout');
</script>
{/literal}
{/block}

Erstellen Sie die Datei confirm.tpl und laden diese in Ihr Theme in frontend/checkout/confirm.tpl hoch.

Nun werden auch diese Nutzeraktivitäten durch den Pixel getrackt. Wenn Sie nun über den Business Manager Werbeanzeigen schalten, müssen Sie natürlich darauf achten, dass Sie den zuvor erstellen und konfigurierten Facebook-Pixel dafür nutzen. Dies wird in der Regel durch eine grüne "Ampel" gekennzeichnet. Innerhalb eines Tages sehen Sie in der Werbeanzeigen-Analyse die Pixel-Events, welche Ihre Anzeige erzielt hat. Bitte beachten Sie, dass sie ggf. die Datenschutzrichtlinien auf Ihrer Webseite anpassen müssen.

Das war es auch schon, der Facebook-Pixel ist nun erfolgreich implementiert und kann ohne Probleme mit Shopware genutzt werden. Sollten noch Fragen offen sein, zögern Sie nicht sich bei uns zu melden. Gerne dürfen Sie diesen Artikel teilen und verbreiten, vielen Dank.