Sign in / Join

Adding Your Facebook Pixel To Your Dropshipping Store

Today I would like to show you how to add your Facebook Pixel and tracking events to your dropshipping store powered by AliDropship.

This is a quick way to add your Facebook Pixel to your store/blog/website without the need to modify the code within WordPress. For this example I am going to use the Raphael theme by AliDropship. you can check all their custom themes here.

Getting Your Facebook Pixel

First, you must be logged in to your Facebook account, and then navigate to your ads manager to get your Pixel code.

If you are using a personal account, navigate directly to your Ads Manager:

Facebook Ads Manager

If you are using a business account, navigate to your Business Manager:

Facebook Business Manager

Then select the Ad account you would like to use. You need an Ad account to get your Facebook Pixel code, and each Pixel code will be linked to one Ad account only.

Inside your Ads Manager, first click on the left menu, and then click on "Pixels":

If for some reason you don't see the "Pixels" link at the left menu, just click the All Tools at the bottom of the menu, and you will find it under "Measure & Report".

Once in your Pixels page, click on the "Details" button. If you never created a Pixel before, you will see an step by step tutorial here instead. Just follow it and create your pixel.

Once in the Details page, click on the "Set Up" button to get your Pixel code.

Then select the option Manually Install The Code Yourself.

Or if you are using WooCommerce, Facebook has a Plugin to integrate your WooCommerce store with your Facebook account. You can read more about this option here.

Now copy your Pixel code. This code is the same for everyone, the only thing that changes is your Account ID number.

Now that you have copied your Pixel code, click the "Continue" button. This will take you to the Events window, and this is where we are going to copy all our Facebook tracking events.

Getting Your Facebook Pixel Events

Within the events window, click on: View Content, Add To Cart, Initiate Checkout, and Purchase.

Now, copy each event code and paste them into a text file.

Pixel Events Copied

<!-- fbviewcontent -->
<script>fbq('track', 'ViewContent');</script>
<!-- fbviewcontent -->
<!-- fbaddtocart -->
<script>fbq('track', 'AddToCart');</script>
<!-- fbaddtocart -->
<!-- fbinitiatecheckout -->
<script>fbq('track', 'InitiateCheckout');</script>
<!-- fbinitiatecheckout -->
<!-- fbpurchase -->
<script>fbq('track', 'Purchase');</script>
<!-- fbpurchase -->
<!-- fbnopurchase -->
<script>fbq('trackCustom', 'NOPurchase');</script>
<!-- fbnopurchase -->

Adding Your Pixel To Your Website

Once you have copied them all, navigate to your WordPress/AliDropship Store installation, and open the "Customization" tab at the bottom left of the page. You need to have an AliDropship theme installed on your site, for this tab to appear.

Now, click on the "Head" tab, and paste your Pixel code in the <head> section and hit "Save Settings".

Now, we need to install the FB Pixel Helper addon for Google Chrome. This is a tool developed by Facebook, that will let you check if your Pixel code is working fine on your website, or in any other website you visit.

Facebook Pixel Helper Addon

Once Installed, purge all the cache from your site. If you are using Cloudflare purge all there too.

Now open a new incognito window, and navigate to your homepage, If you have the Facebook Pixel Helper installed, click on it, and you will see that the default PageView event is loading correctly.

Now lets return to our WordPress dashboard, and navigate to the "Thank You" tab, here we will paste our Purchase event code into the first conversion tracking script box. This event will fire each time a user completes a purchase successfully.

Now lets do the same for the Payment is Failed box, but this time we are going to change it a little bit. We need to change this because we don't want to track a purchase if the payment failed, So I changed the track to trackCustom so that Facebook knows this is a custom event, and I also added NOPurchase instead of Purchase, to remember that if this event loads/fires it means that the user did not complete the purchase. You will be able to track this inside your Facebook Account. Once all is done just hit Save.

Finally we need to navigate to the "Footer" tab, and paste all the other Facebook Events we have previously created. But wait... have you noticed that I have modified the events? Just take a look at the picture below.

Did you notice? Well we need to change the events a little bit in order to make them load/fire on click events, just when a user clicks on a particular link or button in our site. So here is what I did:

As you can see in the image above, I have added some custom code to the standard Facebook Pixel Events. That code that starts with jQuery has a click function, that will let us load/fire the events only when a user clicks on the buttons we choose. And for this to work we are using Elements, IDs, and Classes.

As you already know, the example in this post is based on the Raphael theme by AliDropship, so if you are using other themes, you will need to check if the IDs and classes used are correct or not, and if they are different just replace them with the ones in your theme.

For example for the AddToCart event I am using:

Add To Cart Event

<!-- fbaddtocart -->
<script type="text/javascript">
jQuery( 'button#addToCart' ).click(function() {
fbq('track', 'AddToCart');
});
</script>
<!-- fbaddtocart -->

And in RED you can see that I added button#addToCart which is the element and ID of the Add To Cart button from my site.

And for the InitiateCheckout event:

Initiate Checkout Event

<!-- fbinitiatecheckout -->
<script type="text/javascript">
jQuery( 'a.btn-proceed' ).click(function() {
fbq('track', 'InitiateCheckout');
});
</script>
<!-- fbinitiatecheckout -->

But the Initiate Checkout event button had no ID, so I used the element and Class instead, in this case a.btn-proceed. This event loads every time someone clicks on the "Proceed To Checkout" button on my site.

This should work for any theme you are using, but is your responsibility to test, just change the classes of that code, with the classes your button has. and if your button has an ID then it's easier, just replace that text with your button or html element ID, for example by the time I am writing this tutorial, in the Raphael/Davinci themes it is button#addToCart

Here is a quick video that will show you how to find the correct element, ID, and Classes to use for your events:

Just remember that when you add the code to your Pixel Events... Elements are alone [button], IDs start with # [#addToCart], and Classes with a . [.btn-proceed] And when there is no ID for the element, you need to use the Classes instead.

That's it guys, now you can track your add to cart and initiate checkout clicks. With this you can actually track any element clicked on your site, for example you can track clicks on a link within a blog post, or a link click in your product description.

That's all guys. If you find this too difficult, maybe it is a better idea to buy the Facebook Business Addon Here. It includes 6 events already added to the plugin, it works with both Alidropship Orignal or the Woocommerce version, and it will let you create product catalogs, to run Facebook Ads and Remarketing Campaigns, so you won't have to worry about adding or changing codes in your site.

6 comments

    • @updatedreview 5 April, 2019 at 17:06 Reply

      Hi, the AddToCart event is placed in the footer of the theme [You need to make sure to change your IDs/Classes according to the theme you are using]. Just follow the tutorial step by step and look at all the images.

Leave a reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.