Jump to content

Facebook Pixel - Purchase Event Tracking

samad909

By samad909
in Developer Corner

 Share

Recommended Posts

samad909 Junior Member

samad909

Posted
Posted

I have gone through the posts listed at the bottom. Using some help from those topics and code listed I tried to setup a hook that fires the Facebook purchase pixel event. I want it to output the Facebook purchase event if ispaid=true on the ShoppingCartCheckoutCompletePage hook. I just amended @brian!'s code from one of the posts. The code is as listed as follows, but it does not work. Any ideas? 

<?php

# Facebook Pixel Output Hook
# Written by brian! 

function facebook_pixel_hook_purchase($vars) {

return <<<HTML
 <!-- 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','https://connect.facebook.net/en_US/fbevents.js');
 fbq('init', 'XXXXXX');
 fbq('track', 'Purchase');
 </script>
 <noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=XXXXXX&ev=Purchase&noscript=1"
 /></noscript>
 <!-- DO NOT MODIFY -->
 <!-- End Facebook Pixel Code -->
HTML;
}

add_hook("ShoppingCartCheckoutCompletePage", 2, function($vars) {
	if($vars['ispaid'] == true) {
		facebook_pixel_hook_purchase();
	}
}

 

 

0
Link to comment
Share on other sites
samad909 Junior Member

samad909

Posted
  • Author
Posted

The code above had an error ie the add_hook wasnt closed properly, the last line should have looked like });
Even after fixing this it was not working so I made some more changes and it worked. I moved the heredoc inside a variable and echoed it and that got it working. Since I have the Facebook base pixel code in another hook I tried using only the fbq track event instead of the full pixel code but that doesn't work for some reason so I had to use the full pixel code for this hook as well. The code that works is as follows, 

<?php

function fbpixel_purchase($vars) {
	
	$fbp_amt = $vars['amount'];
	$html = <<<HTML
 <!-- 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','https://connect.facebook.net/en_US/fbevents.js');
 fbq('init', 'XXXXXX'); // Insert your pixel ID here.
 fbq('track', 'Purchase', {
   value: $fbp_amt,
 });
 </script>
 <!-- End Facebook Pixel Code -->
HTML;
	echo $html;
}

add_hook("ShoppingCartCheckoutCompletePage", 1, function($vars) {
	if($vars['ispaid'] == true) {
		fbpixel_purchase($vars);
	}
});

 

0
Link to comment
Share on other sites
  • 8 months later...
samad909 Junior Member

samad909

Posted
  • Author
Posted

@rabijit the hook listed above did not work as expected so I got some advice from @brian!. I ended up adding the following to viewinvoice.tpl just before </body> to get it working (note that I am working with Euro (€) , 

{if $status eq "Paid" || $paymentSuccessAwaitingNotification || $paymentSuccess || $paymentInititated}
{assign var=total_amt value=$total|replace:'€':''|replace:'EUR':''|replace:' ':''}
<!-- Facebook Pixel Code -->
{literal}
<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','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXX'); // Insert your pixel ID here.
fbq('track', 'Purchase', {
 currency: 'EUR',
 amount: '{/literal}{$total_amt}{literal}',
});
</script>	
{/literal}
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
{/if}

 

0
Link to comment
Share on other sites
Kian Senior Member

Kian

Posted
Posted

Facebook Pixel... it took me weeks to implement purchase event properly. Here are my findings.

First. We can't simply put the js code in the template. Every time you refresh the "paymeny success" page, Facebook registers a purhcase event. This may not seem a big deal but it is. All you get in return is inconsistent information. Your marketing strategy is simply 🤬 If I refresh the page 10.000 times, Facebook register 10.000 purchases. This makes your data, graphs, budget and strategy worthless. I've seen it happening with some of my customers. According to Facebook they were selling hundreds on products but in WHMCS there were less than 10 orders for a very expensive VPS. That said, you have to make sure that purchase event triggers only once per order/invoice.

Second. It know that it's boring but purchase event is useless if it doesn't include contents (product IDs and TLDs) unless what you seel is just one product. Knowing what you are selling is crucial otherwise you can't tune your ads and do A/B testing.

Third. It depends by the tastes but IMO purchase event should trigger when a customer places the order and not when he actually pays it. This way you can also track "offline" sales and payment methods. In other words if I have 25 purchases on June, I expect to find 25 orders on WHMCS (one to one correspondence).

0
Link to comment
Share on other sites
rabijit Member

rabijit

Posted
Posted (edited)

@Kian how you implement it then?

@samad909 above code works fine for me. It is triggering purchase event in cart complete page with price and currency(I have hard coded it). I am triggering all fb pixel event via google tag manager and only purchase event via hooks.

 

 

Edited by rabijit
0
Link to comment
Share on other sites
  • 1 month later...
AJ47 Junior Member

AJ47

Posted
Posted

@Kian

Possible solutions on how to implement this? We're looking for a way to capture sales and what products / TLD's were ordered. Also never thought about the refresh issue.  Perhaps there's a way to redirect the user away from order success page automatically or redirect them if they refresh the page.

0
Link to comment
Share on other sites
  • 3 months later...
  • 2 years later...
sahostking Senior Member

sahostking

Posted
Posted (edited)
On 6/26/2020 at 8:57 PM, samad909 said:

@rabijit the hook listed above did not work as expected so I got some advice from @brian!. I ended up adding the following to viewinvoice.tpl just before </body> to get it working (note that I am working with Euro (€) , 

{if $status eq "Paid" || $paymentSuccessAwaitingNotification || $paymentSuccess || $paymentInititated}
{assign var=total_amt value=$total|replace:'€':''|replace:'EUR':''|replace:' ':''}
<!-- Facebook Pixel Code -->
{literal}
<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','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXX'); // Insert your pixel ID here.
fbq('track', 'Purchase', {
 currency: 'EUR',
 amount: '{/literal}{$total_amt}{literal}',
});
</script>	
{/literal}
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
{/if}

 

anyway to have this code works with various currencies? We offer multiple currencies for customer from USD,ZAR,GBP,NGN plus others for example?

Edited by sahostking
0
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated

  I accept