Search code examples
phpfacebooksmartye-commerceshopware

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.

Solution

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