Vigraman Padmanaban Vigraman Padmanaban - 2 months ago 20
Smarty Question

How to add facebook pixel and conversion code to shopware 5

I am using Shopware 5.1.2. I am new to this templating system.

I am trying to add FB pixcel code to the header file.
So I created fb.tpl under

/themes/Frontend/Bare/frontend/index
folder

I was appending it to modernizr block:

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

{block name="frontend_index_header_javascript_modernizr_lib" append}
<!-- Facebook 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','//connect.facebook.net/en_US/fbevents.js');

fbq('init', 'XXXXXXXXXXXXXX');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
{/block}


I also tried adding the fb.tpl to the specific theme folder.

And cleared cache.
Still the FB code is not visible in the website.

Answer

Move your file to Responsive (or your active theme) theme & rename it as header.tpl like:

/themes/Frontend/Responsive/frontend/index/header.tpl

Modify file content like below:

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

{block name="frontend_index_header_javascript_tracking" append}
{literal}
<!-- Facebook Pixel Code -->

<!-- YOUR Facebook Pixel Code HERE -->

<!-- End Facebook Pixel Code -->
{/literal}
{/block}

From Backend menu perform:

Configuration > Theme Manager > Select Active Theme > Compile Theme

Reload frontend page. It should work!