How to Add Your Facebook Pixel and Tracking Events to Your Dropshipping Store

 Today, I’m going to walk you through how to add your Facebook Pixel and tracking events to your dropshipping store powered by AliDropship.

This is a simple method that doesn’t require modifying your WordPress code. For this example, I’ll use the Raphael theme by AliDropship. You can explore all their custom themes here.


Getting Your Facebook Pixel

First, log in to your Facebook account and head over to your Ads Manager to grab your Pixel code.

If you’re using a personal account, go directly to the Facebook Ads Manager.

For business accounts, access the Facebook Business Manager, then select the Ad account you’ll use. Remember, an Ad account is required to create a Facebook Pixel, and each Pixel is tied to a specific Ad account.

In Ads Manager, open the left-hand menu and click on “Pixels”:



If you don’t see the “Pixels” option, click “All Tools” at the bottom of the menu. You’ll find it under “Measure & Report”.



Once on the Pixels page, click “Details”. If you’ve never created a Pixel before, Facebook will guide you through the setup process. Follow the instructions to create your Pixel.



When you’re on the Details page, click “Set Up” to access your Pixel code.



Choose the option “Manually Install The Code Yourself”.



Alternatively, if you’re using WooCommerce, Facebook offers a plugin to integrate your store with your Facebook account. You can learn more about it here.

Copy the Pixel code displayed. The structure of this code is the same for everyone, except for your unique Account ID.



Now, click “Continue” to proceed to the Events window, where you’ll copy all your Facebook tracking events.


Getting Your Facebook Pixel Events

In the Events window, select View Content, Add To Cart, Initiate Checkout, and Purchase events.



Copy the event codes and paste them into a text file for safekeeping:



Here’s how the Pixel Events look:


<!-- 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

After collecting all your event codes, log in to your WordPress/AliDropship store. Go to the “Customization” tab in the bottom-left corner. Make sure you have an AliDropship theme installed; otherwise, this tab won’t appear.



Click on the “Head” tab and paste your Pixel code into the <head> section. Then, click “Save Settings”.



To ensure your Pixel is working, install the Facebook Pixel Helper Chrome extension. It’s a handy tool that checks whether your Pixel is functioning correctly.

Get the Facebook Pixel Helper Addon

After installing the extension, clear your website’s cache. If you’re using Cloudflare, make sure to purge the cache there as well.

Open an incognito browser window, visit your homepage, and use the Pixel Helper to verify that the PageView event is firing properly.



Adding Purchase and Custom Events

Next, return to your WordPress dashboard and navigate to the “Thank You” tab. Here, paste your Purchase event code into the first conversion tracking script box. This event will trigger whenever a user completes a purchase successfully.

For the Payment Failed box, slightly modify the code. Instead of tracking a purchase, use trackCustom to register a custom event. Replace Purchase with NOPurchase to log failed transactions. This helps Facebook identify unsuccessful purchases. Once done, click Save.



Adding Events to Your Footer

Go to the “Footer” tab and paste the remaining event codes. However, for certain events, we need to modify them to trigger only on specific user actions, like button clicks.



For example, I added custom jQuery code to track clicks on specific elements, IDs, or classes. Let’s look at the Add To Cart event:


<!-- fbaddtocart -->

<script type="text/javascript">

jQuery( 'button#addToCart' ).click(function() {

fbq('track', 'AddToCart');

});

</script>

<!-- fbaddtocart -->


Here, button#addToCart corresponds to the Add To Cart button’s ID on my site.

For the Initiate Checkout event:


<!-- fbinitiatecheckout -->

<script type="text/javascript">

jQuery( 'a.btn-proceed' ).click(function() {

fbq('track', 'InitiateCheckout');

});

</script>

<!-- fbinitiatecheckout -->


This button didn’t have an ID, so I used its element and class (a.btn-proceed).

Remember, if you’re using a different theme, you’ll need to adjust these classes and IDs accordingly. Check your theme’s structure to ensure accuracy.


Finding Correct Elements, IDs, and Classes

To identify the right elements, IDs, and classes for your events, watch this quick tutorial:





A quick reminder:

  • Elements are standalone, e.g.: [button].
  • IDs start with a [hash symbol], e.g.: [#addToCart].
  • Classes start with a [period OR dot], e.g.: [.btn-proceed].

When no ID is available, use the class instead.


Conclusion

Now, you’re ready to track Add To Cart and Initiate Checkout clicks. You can apply this technique to any element on your site, like links in blog posts or product descriptions.

If this feels overwhelming, you might consider using the Facebook Business Addon. It simplifies everything by pre-adding six events to your site. It works with both the AliDropship Original and WooCommerce version, letting you run Facebook Ads and remarketing campaigns effortlessly.

That’s all for now!

Comments