如何将facebook像素和转换代码添加到shopware 5

Question

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 1

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!