Facebook Tracking Pixel Integration

Lisa88 · 13. Juli 2016 um 05:52

Hallo liebe Community,

ich möchte gerne für Facebook Retargeting den Facebook Pixel auf meiner Seite integrieren um die Pageviews zu tracken. Dazu habe ich folgenden Code in die index.tpl meines Themes kopiert:

{block name="frontend_index_header_javascript" append}
    {if $Controller != "checkout"}
        
            {literal} 
            !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','//connect.facebook.net/en_US/fbevents.js');
            {/literal}
            fbq('init', ‚HIER_IHR_PIXEL_ID‚);
            fbq('track', 'PageView');
        
    {/if}
{/block}

Danach habe ich sämtliche Caches gelöscht.Leider scheint das Pixel trotzdem nicht eingebunden zu werden. Der Facebook Pixel Helper erkennt kein Pixel auf meiner Seite (www.mixmyshampoo.de)

Hat jemand eine Idee woran das liegen könnte?

Besten Dank im Voraus & viele Grüße,
Lisa

steinsoftware · 13. Juli 2016 um 06:36

Mach mal sowieso statt

{block name="frontend_index_header_javascript" append}
...
{/block}

ein

{block name ="frontend_index_header_javascript"}
...

{$smarty.block.parent}

{/block}

Smarty hat oft Probleme mit prepend und append und bindet den Block nicht mit ein. Mit dem smarty.block.parent kann man das dann schon mal umgehen.

Dann ist die Frage: Muss der in den body oder den header?

Wenn in den body dann ist der Block schon mal richtig und oben in deinem File steht dann hoffentlich auch sowas wie

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

Wenn der Tracking code in den head-Bereich einer Seite gehört, dann muss ganz oben in deiner Theme-Datei sowas stehen:

{extends file="parent:frontend/index/header.tpl"}

und der Block wäre dann ein anderer nämlich dieser:

{* Block for tracking codes which are required to include in the `head` section of the document *}
{block name="frontend_index_header_javascript_tracking"}{/block}

Nach Änderungen einfach immer die Shopware-Caches löschen und das Theme kompilieren. Und dann vom Browser die Seite neu generieren lassen.

Lisa88 · 16. Juli 2016 um 14:44

Vielen Dank erstal für Deine ausführliche Antwort! Ich habe jetzt einiges ausprobiert, scheine aber noch nicht die richtige Lösung umgesetzt zu haben. Anbei der aktuelle Code aus meinder index.tpl (der Facebook Pixel Code steht ganz unten). Habe ich da vielleicht was falsch gemacht?

{block name="frontend_index_start"}{/block}
{block name="frontend_index_doctype"}

{/block}

{block name='frontend_index_html'}

{/block}

{block name='frontend_index_header'}
	{include file='frontend/index/header.tpl'}
{/block}



    {block name='frontend_index_after_body'}{/block}

	

		{* Message if javascript is disabled *}
		{block name="frontend_index_no_script_message"}
			
                {include file="frontend/_includes/messages.tpl" type="warning" content="{s name="IndexNoscriptNotice"}{/s}" borderRadius=false}
			
		{/block}

		{block name='frontend_index_before_page'}{/block}

		{* Shop header *}
		{block name='frontend_index_navigation'}
			
				{* Include the top bar navigation *}
				{block name='frontend_index_top_bar_container'}
					{include file="frontend/index/topbar-navigation.tpl"}
				{/block}

				

					{* Shop navigation *}
					{block name='frontend_index_shop_navigation'}
						{include file="frontend/index/shop-navigation.tpl"}
					{/block}

					{* Logo container *}
					{block name='frontend_index_logo_container'}
						{include file="frontend/index/logo-container.tpl"}
					{/block}

					{* Maincategories navigation top *}
				{block name='frontend_index_navigation_categories_top'}
					
					    
						{block name="frontend_index_navigation_categories_top_include"}
						    {include file='frontend/index/main-navigation.tpl'}
						{/block}
					    
					
				{/block}

					
				

				
			

			
		{/block}

        {block name='frontend_index_emotion_loading_overlay'}
            {if $hasEmotion && !$hasEscapedFragment}
                
                    
                
            {/if}
        {/block}

		

            {* Breadcrumb *}
			{block name='frontend_index_breadcrumb'}
                {if count($sBreadcrumb)}
                    
                        {block name='frontend_index_breadcrumb_inner'}
                            {include file='frontend/index/breadcrumb.tpl'}
                        {/block}
                    
                {/if}
			{/block}

			{* Content top container *}
			{block name="frontend_index_content_top"}{/block}

			
				{* Sidebar left *}
				{block name='frontend_index_content_left'}
					{include file='frontend/index/sidebar.tpl'}
				{/block}

				{* Main content *}
				{block name='frontend_index_content_wrapper'}
                    
                        {block name='frontend_index_content'}{/block}
                    
				{/block}

				{* Sidebar right *}
				{block name='frontend_index_content_right'}{/block}

				{* Last seen products *}
				{block name='frontend_index_left_last_articles'}
					{if $sLastArticlesShow && !$isEmotionLandingPage}
                        {* Last seen products *}
                        
                            
                                {s namespace="frontend/plugins/index/viewlast" name='WidgetsRecentlyViewedHeadline'}{/s}
                            
                            
                                
                            
                        
					{/if}
				{/block}
			
		

		{* Footer *}
		{block name="frontend_index_footer"}
			
				
					{block name="frontend_index_footer_container"}
						{include file='frontend/index/footer.tpl'}
					{/block}
				
			
		{/block}

		{block name='frontend_index_body_inline'}{/block}

Code geht im nächste Post weiter…

Lisa88 · 16. Juli 2016 um 14:45

…hier der Rest

{block name="frontend_index_header_javascript"}
    
        //<![CDATA[
        {block name="frontend_index_header_javascript_inline"}
            var timeNow = {time() nocache};

            var controller = controller || {ldelim}
                'vat_check_enabled': '{config name='vatcheckendabled'}',
                'vat_check_required': '{config name='vatcheckrequired'}',
                'ajax_cart': '{url controller='checkout' action='ajaxCart'}',
                'ajax_search': '{url controller="ajax_search"}',
                'ajax_login': '{url controller="account" action="ajax_login"}',
                'register': '{url controller="register"}',
                'checkout': '{url controller="checkout"}',
                'ajax_logout': '{url controller="account" action="ajax_logout"}',
                'ajax_validate': '{url controller="register"}',
                'ajax_add_article': '{url controller="checkout" action="addArticle"}',
                'ajax_listing': '{url module="widgets" controller="Listing" action="ajaxListing"}',
                'ajax_cart_refresh': '{url controller="checkout" action="ajaxAmount"}'
            {rdelim};

            var snippets = snippets || {ldelim}
                'noCookiesNotice': '{s name="IndexNoCookiesNotice"}{/s}'
            {rdelim};

            var themeConfig = themeConfig || {ldelim}
                'offcanvasOverlayPage': '{$theme.offcanvasOverlayPage}'
            {rdelim};

            var lastSeenProductsConfig = lastSeenProductsConfig || {ldelim}
                'baseUrl': '{$Shop->getBaseUrl()}',
                'shopId': '{$Shop->getId()}',
                'noPicture': '{link file="frontend/_public/src/img/no-picture.jpg"}',
                'productLimit': ~~('{config name="lastarticlestoshow"}'),
                'currentArticle': {ldelim}{if $sArticle}
                    {foreach $sLastArticlesConfig as $key => $value}
                        '{$key}': '{$value}',
                    {/foreach}
                    'articleId': ~~('{$sArticle.articleID}'),
                    'linkDetailsRewritten': '{$sArticle.linkDetailsRewrited}',
                    'articleName': '{$sArticle.articleName|escape:"javascript"}',
                    'imageTitle': '{$sArticle.image.description|escape:"javascript"}',
                    'images': {ldelim}
						{foreach $sArticle.image.thumbnails as $key => $image}
							'{$key}': {ldelim}
                                'source': '{$image.source}',
                                'retinaSource': '{$image.retinaSource}',
                                'sourceSet': '{$image.sourceSet}'
                            {rdelim},
						{/foreach}
					{rdelim}
                {/if}{rdelim}
            {rdelim};
        {/block}
        //]]>
	

    {if $theme.additionalJsLibraries}
        {$theme.additionalJsLibraries}
    {/if}
{/block}

{* Include jQuery and all other javascript files at the bottom of the page *}
{block name="frontend_index_header_javascript_jquery_lib"}
    {compileJavascript timestamp={themeTimestamp} output="javascriptFiles"}
    {foreach $javascriptFiles as $file}
        
    {/foreach}
{/block}

{block name="frontend_index_header_javascript_jquery"}
    {* Add the partner statistics widget, if configured *}
    {if !{config name=disableShopwareStatistics} }
        {include file='widgets/index/statistic_include.tpl'}
    {/if}
{/block}

{extends file="parent:frontend/index/index.tpl"}
{block name="frontend_index_header_javascript"}
    {if $Controller != "checkout"}
        
            {literal} 
            !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','//connect.facebook.net/en_US/fbevents.js');
            {/literal}
            fbq('init', ‚xxxxxxxxxx‚);
            fbq('track', 'PageView');
        
    {/if}
{$smarty.block.parent}
{/block}

Vielen lieben Dank im Voraus!!

steinsoftware · 18. Juli 2016 um 07:13

Keine Ahnung, habe das noch nie umgesetzt und kann dir nur das von mir oben gesagte wiederholen.

Deine Index.tpl ist aber viel zu lang. Du überschreibst ja in deinem Theme die gesamte Datei. Das ist ja so nicht gewollt. Du willst ja nur einen Teil ändern. In deiner Index.tpl stehen wirklich NUR die Änderungen drin. Wie oben bereits geschrieben, und angenommen der Code gehört in den Body-Teil der Seite, dann besteht deine Index.tpl NUR aus diesem bischen Code:

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

{block name="frontend_index_javascript"}

DEIN CODE

{$smarty.block.parent}

{/block}

Das ist wirklich alles. Wenn der Code in den Head-Bereich der Seite soll legst du eine frontend/index/header.tpl in deinem Theme an und schreibst in der ersten Zeile eben nicht extends von index sondern extends von header.tpl und der Block ist dann eber der frontend_index_header_javascript_tracking

Synonymous · 18. Juli 2016 um 07:51

Bist Du Dir sicher, dass die Variable $Controller und nicht $controller heißt? Du solltest auch prüfen, ob das Script im HTML Output zu sehen ist. Nur weil FB den Code nicht findet heißt es nicht, dass er nicht doch ausgegeben wird und Du vielleicht an der völlig falschen Stelle suchst.

Ansonsten kann ich mich steinsoftware nur anschließen.

Lisa88 · 18. Juli 2016 um 11:29

Hallo zusammen, vielen lieben Dank nochmals für die tatkräftige Unterstützung! Ich habe den Code jetzt im Headbereich wie beschrieben eingefügt und hohe Anführungszeichen vor und hinter der Trackingnummer eingetragen. Jetzt wird der Pixel im Quelltext ausgegeben und von Facebook erkannt Bin happy! Danke!!

SmartStylez · 23. Januar 2019 um 21:49

Wenn ich zusätzlich folgende Unterseiten tracken möchte, welche Template-Dateien sind das genau, die ich erweitern muss?

InitiateCheckout - (Kaufabwicklung)
Purchase - (Kaufverhalten)
AddPaymentInfo - (Zahlungsinformationen hinzufügen)
ViewContent - (Inhaltansicht)
AddToCart - (zum Warenkorb hinzufügen)
AddToWishlist - (zur Wunschliste hinzufügen)
CompareProducts - (Produktvergleich)
PageView - (Seitenansicht)
Search - (Suche)

Thema		Antworten	Aufrufe
Facebook Werbeanzeigen-"Pixel" schrottet Frontend?! Allgemein	15	1521	6. Februar 2017
Facebook Pixel Sonstiges	2	505	24. Februar 2020
Facebook Pixel im head-Bereich -> Fehler! Allgemein	2	830	26. Oktober 2017
FB Pixel - Events Allgemein programming	0	508	31. März 2021
Facebook Pixel, wie vorgehen bei "Nicht-Zustimmung" Sonstiges	2	455	10. April 2017

Facebook Tracking Pixel Integration

Verwandte Themen