CODEWITHSUNDEEP
javascriptphpwordpress
sixli
sixli

Reputation: 303

Load a line from <script> on specific page

I have a situation where I need to load the "Purchase" event inside this script only on certain pages. I'm adding it to header.php and need to load FB Pixel on all pages, but that one event only on the order confirmation page. How would I load only that one link inside of this script just based on the URI?

<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', "xxxxx"); 

   fbq('track', 'PageView'); 

   fbq('track', 'Purchase', {value: '0.00', currency: 'GBP'});

</script>

Upvotes: 1

Views: 237

Answers (1)

Xhynk
Xhynk

Reputation: 13840

You shouldn't be loading scripts in your header.php file, they should be enqueued in your functions.php file using the wp_enqueue_scripts hook. It will make your life many times easier later. I'm still cleaning up past-me's mistakes of loading scripts directly into the header and footer files.

First, you should save the first part of your script and upload it to your theme's /js folder, name it something simple like "facebook-tracking.js"

facebook-tracking.js:

!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', "xxxxx"); 

fbq('track', 'PageView');

To enqueue that properly, in your functions.php you would add the following (but hold on):

function enqueue_fb_tracking() {
   wp_enqueue_script( 'fb-tracking-js', get_stylesheet_directory_uri() . '/js/facebook-tracking.js', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_fb_tracking' );

However you need to extend your script on certain pages. Luckily WP has a function for that called wp_add_inline_script(). So we can flavor that in there just as well, using is_page() to only load it on the pages you want.

function enqueue_fb_tracking() {
    wp_enqueue_script( 'fb-tracking-js', get_stylesheet_directory_uri() . '/js/facebook-tracking.js', array(), '1.0.0' );

    $purchase_pages = array(
        'checkout',
        'some-other-page'
    );

    if( is_page( $purchase_pages ) ){
        wp_add_inline_script( 'fb-tracking-js', "fbq('track', 'Purchase', {value: '0.00', currency: 'GBP'});" );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_fb_tracking' );

Just put the page titles, slugs, or ID's you want it to track the "Purchase" action on in the $purchase_pages array.

Upvotes: 1

Related Questions