How to Insert the Facebook Conversion Pixel in Xenforo

Facebook Conversion Pixel in Xenforo

With Facebook organic reach dropping it is very important to track everything with your Facebook ads to know if they are producing conversions. Facebook ads can be a very good way to convert users into registered members on your Xenforo forum. Follow the instructions below to see how to insert the Facebook conversion pixel in Xenforo.

Step 1

First in Xenforo, login to your admin panel, go to “Appearance” and click into “Templates.” Then do a search for PAGE_CONTAINER.

xenforo page container

Step 2

Scroll down and look for a line that looks like this:

<xen:if is="{$head}"><xen:foreach loop="$head" value="$headElement">{xen:raw $headElement}</xen:foreach></xen:if>

We will be adding the code below after the above line. You will need your FB conversion pixel as part of this. If you don’t know how to get this, read our post on How to Insert the Facebook Conversion Pixel in WordPress up to step 5 and come back.

Basically all we are adding is this:

<xen:if is="{$contentTemplate} == 'register_process'"> //pixel script here </xen:if>

And afterwards it should look like this:

<xen:if is="{$contentTemplate} == 'register_process'">
		<!-- Facebook Conversion Code for Xenforo Forum -->
		<script>(function() {
		  var _fbq = window._fbq || (window._fbq = []);
		  if (!_fbq.loaded) {
		    var fbds = document.createElement('script');
		    fbds.async = true;
		    fbds.src = '//connect.facebook.net/en_US/fbds.js';
		    var s = document.getElementsByTagName('script')[0];
		    s.parentNode.insertBefore(fbds, s);
		    _fbq.loaded = true;
		  }
		})();
		window._fbq = window._fbq || [];
		window._fbq.push(['track', '000000000000', {'value':'0.00','currency':'USD'}]);
		</script>
		<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=000000000000&amp;cd[value]=0.00&amp;cd[currency]=USD&amp;noscript=1" /></noscript>
	</xen:if>

If you want to see the full header after we added our code here it is:

<head>
<xen:hook name="page_container_head">
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
	<xen:if is="{$isResponsive}">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</xen:if>
	<xen:if is="{$requestPaths.fullBasePath}">
		<base href="{$requestPaths.fullBasePath}" />
		<script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
			var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
			if (_b && _b.href != _bH) _b.href = _bH;
		</script>
	</xen:if>

	<title><xen:if is="{$title}">{xen:raw $title} | {$xenOptions.boardTitle}<xen:else />{$xenOptions.boardTitle}</xen:if></title>

	<noscript>


<style>.JsOnly, .jsOnly { display: none !important; }</style>



</noscript>
	<link rel="stylesheet" href="css.php?css=xenforo,form,public&amp;style={xen:urlencode $_styleId}&amp;dir={$visitorLanguage.text_direction}&amp;d={$visitorStyle.last_modified_date}" />
	<!--XenForo_Require:CSS-->
	<xen:if is="@fa_hostlocal">
		<link rel="stylesheet" href="{$requestPaths.fullBasePath}@fa_localpath">
	<xen:else />
		@fa_cdnpath
	</xen:if>
	<xen:if is="@fa_webfonts">
		@fa_googlefont
	</xen:if>

	{xen:helper ignoredCss, {$visitor.ignoredUsers}}

	<xen:include template="google_analytics" />
	<xen:include template="page_container_js_head" />

	<link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />
	<link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}" href="{xen:link forums/-/index.rss}" />
	<xen:if is="{$pageDescription.content} AND !{$pageDescription.skipmeta} AND !{$head.description}"><meta name="description" content="{xen:string wordTrim, {xen:helper stripHtml, {xen:raw $pageDescription.content}}, 200}" /></xen:if>
	<xen:if is="{$head}"><xen:foreach loop="$head" value="$headElement">{xen:raw $headElement}</xen:foreach></xen:if>

	<xen:if is="{$contentTemplate} == 'register_process'">
		<!-- Facebook Conversion Code for Xenforo Forum -->
		<script>(function() {
		  var _fbq = window._fbq || (window._fbq = []);
		  if (!_fbq.loaded) {
		    var fbds = document.createElement('script');
		    fbds.async = true;
		    fbds.src = '//connect.facebook.net/en_US/fbds.js';
		    var s = document.getElementsByTagName('script')[0];
		    s.parentNode.insertBefore(fbds, s);
		    _fbq.loaded = true;
		  }
		})();
		window._fbq = window._fbq || [];
		window._fbq.push(['track', '000000000000', {'value':'0.00','currency':'USD'}]);
		</script>
		<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=000000000000&amp;cd[value]=0.00&amp;cd[currency]=USD&amp;noscript=1" /></noscript>
	</xen:if>
</xen:hook>
</head>

What the above code is doing is checking if the register process template is being called, and if so, then it fires off the conversion pixel.

Step 3

After you are done adding the code, simply click “Save and Exit.”

xenforo save and exit

And your done! Conversions should now start firing when new members register after clicking your Facebook ads.

I can confirm that the above code works as I currently have this running on active Facebook campaigns with conversions firing.

Hopefully this was helpful! As always feel free to leave your comments below and happy conversion tracking!

Get More Stuff Like This

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

2 thoughts on “How to Insert the Facebook Conversion Pixel in Xenforo”

Leave a Comment