📊 Facebook/Meta Pixel is an analytics tool that allows you to track user activity on your website and measure the effectiveness of Facebook ads.
In this step-by-step tutorial, we will show you how to create your own code Facebook/Meta Pixel and properly implement it on your site.
➡️ After logging into your Facebook Business account, click the icon The menu (the so-called "hamburger") in the upper left corner, and then select the option "Event Manager".
In the Event Manager, click the green ✅ button. "Merge data".
In the new window, select 🌐. "Internet", then click "Next.".
📁 Select "Existing dataset". or click "Create a new dataset"..
The data set is simply the name of the source - such as the name of your website.
In our case, it will be: "cocos.codes".
🛠️ Then select "Manual configuration"., then click "Next.".
🔄 In the next window, select the option "Conversion API and Pixel Meta"., then click "Next.".
Almost done... still clicking "Finish"
⚙️ Now go to the section "Data Sources"., and then select a previously created source - in our case "cocos.codes".
Go to tab "Settings".
📥 If you want to download the HTML code of Pixel, at this stage you can click the button "Configure Meta pixel"..
🔎 Under the tab "Settings" find the field "Data set identifier" - it is this number that you will need, for example, to configure the plug-in WordPress Facebook Pixel.
If you chose manual installation, you will see the Pixel base code. Click the "Copy Code".
Pixel's base code looks like this:
The Pixel code needs to be placed in a section of your website. For WordPress, you can do this with a plugin or add the code directly to your theme's header.php file.
If you want to save time and avoid potential mistakes, our plugin Facebook Pixel is the ideal solution. Thanks to it:
Download the CC Facebook Pixel plugin now!
Click the icon Pixel Helper In the browser. If Pixel is installed correctly, you will see a success message.
Facebook Pixel automatically tracks the "PageView" (page visit) event, but you can configure tracking of other events, such as:
You can also set up events in the Facebook Event Manager.
Implementing Facebook Pixel is a key step in optimizing your Facebook marketing efforts. With it, you can:
Read more in the official documentation
In this step-by-step tutorial, we will show you how to create your own code Facebook/Meta Pixel and properly implement it on your site.
What is the Facebook Pixel?
Facebook Pixel is a piece of JavaScript code that you place on your website. With it, you can:- Track conversions from Facebook ads
- Optimize ads for specific activities
- Build audience groups for future advertising
- Use remarketing to people who have already interacted with your site
How to create a Facebook Pixel?
Step 1: Log in to Facebook Business Manager
Tip
If you don't already have a Business Manager account, you can create one at business.facebook.com
Step 2: Go to the Event Manager
➡️ After logging into your Facebook Business account, click the icon The menu (the so-called "hamburger") in the upper left corner, and then select the option "Event Manager".
Step 3: Create a new Pixel
In the Event Manager, click the green ✅ button. "Merge data".
In the new window, select 🌐. "Internet", then click "Next.".
📁 Select "Existing dataset". or click "Create a new dataset"..
The data set is simply the name of the source - such as the name of your website.
In our case, it will be: "cocos.codes".
🛠️ Then select "Manual configuration"., then click "Next.".
🔄 In the next window, select the option "Conversion API and Pixel Meta"., then click "Next.".
Almost done... still clicking "Finish"
⚙️ Now go to the section "Data Sources"., and then select a previously created source - in our case "cocos.codes".
Go to tab "Settings".
📥 If you want to download the HTML code of Pixel, at this stage you can click the button "Configure Meta pixel"..
🔎 Under the tab "Settings" find the field "Data set identifier" - it is this number that you will need, for example, to configure the plug-in WordPress Facebook Pixel.
How do you implement Facebook Pixel code on your site?
Step 1: Select the installation method
Facebook offers several methods for installing Pixel:- Manual code installation
- Integration with a platform (e.g. Shopify)
- Sending instructions to the developer
Step 2: Copy the base code of the Pixel
If you chose manual installation, you will see the Pixel base code. Click the "Copy Code".
Pixel's base code looks like this:
<!-- Meta 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', '{your-pixel-id}');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={your-pixel-id}&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
Note
On the spot {your-pixel-id} will show the unique identifier of your Pixel, consisting of 16 digits.
Step 3: Place the code in the header of your page
The Pixel code needs to be placed in a section of your website. For WordPress, you can do this with a plugin or add the code directly to your theme's header.php file.Warning
If you're already using other tracking code (such as Google Analytics), make sure you don't overwrite it when adding Pixel.
Simplify the process with a plugin COCOS. Facebook Pixel
Tip
Instead of adding the code manually, you can use a professional plugin Facebook Pixel, which will make the whole integration much easier!
- Install Facebook Pixel in minutes without knowing the code
- Easily configure all standard and custom events
- You will benefit from integration with WooCommerce and other popular plugins
- Ensure compliance with RODO with a built-in consent system
- You will gain access to detailed statistics directly in your WordPress dashboard
Success guaranteed
With plug Facebook Pixel It will literally take you minutes, not hours, to implement an advanced tracking system. Forget about manually adding code and possible errors!
Verification of Pixel's correct operation
Step 1: Install the Facebook Pixel Helper extension.
🔧 Pixel Helper is a browser extension Google Chrome, which allows you to check if the Facebook Pixel is working properly on the site. To install it, go to the official Chrome store:https://chromewebstore.google.com/detail/meta-pixel-helper/
Step 2: Visit your site
Visit your website with the extension installed Pixel Helper.
Step 3: Check that the Pixel is working
Click the icon Pixel Helper In the browser. If Pixel is installed correctly, you will see a success message.
Configuration of custom events
Facebook Pixel automatically tracks the "PageView" (page visit) event, but you can configure tracking of other events, such as:- Add to cart
- Start of payments
- Completion of purchase
- Registration
- Other non-standard activities
Example code for tracking the "Purchase" event
fbq('track', 'Purchase', {
value: 99.99,
currency: 'PLN',
content_ids: ['ABC123'],
content_type: 'product'
});
Adding events from the Event Manager
You can also set up events in the Facebook Event Manager.
The most common problems and their solutions
| Problem | Solution |
|---|---|
| Pixel does not record events | Check that the code is correctly placed in the section of the page |
| Duplicate events | Make sure that the Pixel code is added only once on the page |
| Browser console errors | Check that the Pixel code does not interfere with other JavaScript code on the page |
| Problems with GDPR/RODO | Add user consent mechanism before launching Pixel |
Compliance with RODO
Info
Facebook Pixel collects user data, so be sure to comply with RODO. Make sure your privacy policy informs your use of Pixel and obtain the appropriate consents.
Example code to implement Pixel consent
<script>
// Sprawdź, czy użytkownik wyraził zgodę
function checkCookieConsent() {
// Tutaj umieść logikę sprawdzania zgody
return userConsented; // true lub false
}
// Inicjalizacja Pixela tylko gdy jest zgoda
if (checkCookieConsent()) {
fbq('init', '{your-pixel-id}');
fbq('track', 'PageView');
}
Summary
Implementing Facebook Pixel is a key step in optimizing your Facebook marketing efforts. With it, you can:- Measure the effectiveness of ads
- Better target your audience
- Take advantage of remarketing
- Optimize conversions
Success
Congratulations! Your Facebook Pixel should now be up and running. You can now take advantage of the powerful analytics and advertising tools that Facebook offers.
