greinodacosta
greinodacosta

Reputation: 43

Add WooCommerce Checkout Value to Facebook Tracking Pixel?

I'm trying to add a Facebook tracking pixel to my Woocommerce checkout page.

<head>
<!-- Facebook Conversion Code for GRC Domains - Domain Purchase -->
<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', '6019759883360', {'value':'0.01','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6019759883360&amp;cd[value]=0.01&amp;cd[currency]=USD&amp;noscript=1" /></noscript>
</head>

I added this to the page and apparently the pixel is active. However, what I need to do is substitute the value being track by the actual checkout value. I know there is something like $checkout->get_value() but I'm not sure if that is going to work. Ideally something like this:

<head>
<!-- Facebook Conversion Code for GRC Domains - Domain Purchase -->
<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', '6019759883360', {'value':'GET CHECKOUT VALUE','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6019759883360&amp;cd[value]=GET CHECKOUT VALUE&amp;cd[currency]=USD&amp;noscript=1" /></noscript>
</head>

Thanks a lot for your time, Gonçalo

Upvotes: 0

Views: 3755

Answers (2)

Chris at Rixxo
Chris at Rixxo

Reputation: 21

This is what you are looking for i beleive https://www.social-response.co.uk/facebook-conversion-pixel-woocommerce-values/

This is the basic code to it

    // FB Pixel Tracking Code
add_action( 'woocommerce_thankyou', 'fb_pixeltracking' );

function fb_pixeltracking( $order_id ) {
   $order = new WC_Order( $order_id );
   $order_total = $order->get_total();
 ?>

    <!-- Facebook Conversion Code for Sales from Facebook Ads -->
    <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', 'XXXXXXXXXXXXXX', {'value':'<?php echo $order_total ?>','currency':'GBP'}]);
    </script>
    <noscript>
    <img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/trev=XXXXXXXXXXXXXX&amp;cd[value]=<?php echo $order_total ?>&amp;cd[currency]=GBP&amp;noscript=1" />
    </noscript>
     <!-- END FB Tracking -->

<?php
}

Just replace the XXXXX with your pixel code and then choose your currency.

Upvotes: 2

Thi
Thi

Reputation: 2116

<head>
<!-- Facebook Conversion Code for GRC Domains - Domain Purchase -->
<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', '6019759883360', {'value':'<?php echo $order_total ?>','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6019759883360&amp;cd[value]=0.00&amp;cd[currency]=USD&amp;noscript=1" /></noscript>
</head>

Upvotes: 0

Related Questions