A retargeting pixel is a small piece of JavaScript code that tracks visitors to your website and lets you show them ads later on platforms such as Meta, Google, and TikTok. Technically, the pixel is a script that runs in the browser: when a page loads, it sends a request to the ad network's server and tags the user with a cookie or another identifier. In this article we will not discuss retargeting strategy but rather the exact installation process โ the code, GTM, events, and server-side tracking, step by step.
How a pixel works: cookies and events
When a pixel is placed on a page, it first loads a library โ for example, fbevents.js for Meta โ and uses the init command to declare your advertising account identifier. After that, the script sets a first-party cookie in the user's browser or reads an existing one, and this cookie recognizes the user on subsequent visits and in ads on other websites. Every meaningful action โ page view, add to cart, purchase โ is sent to the ad network's server as a separate event, which allows you to split your audience into precise segments.
Installing the Meta Pixel
You obtain the Meta Pixel code from the Events Manager section and place it inside the <head> tag on every page of your site. The base snippet looks like the following, where you replace YOUR_PIXEL_ID with your own identifier.
<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>This code automatically sends a PageView event on every page load. If your site is a single-page application (SPA) built with React or Vue, you must call fbq('track', 'PageView') manually when the route changes, because the page does not fully reload and the default event will not fire on its own.
Installing through GTM
Google Tag Manager is the most convenient way to manage pixels, because you add and disable tags without editing your site's source code. In GTM, create a new Custom HTML tag, paste the Meta Pixel snippet into it, and select the All Pages trigger as the firing condition. For events, create separate tags and bind them to variables passed through the Data Layer โ for example, pass the purchase amount as the value parameter and the currency as currency.
// Pushing an event to the Data Layer (in the site code)
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'purchase',
'value': 199.00,
'currency': 'USD',
'order_id': 'A-10293'
});The Google Ads remarketing tag
Google Ads remarketing uses the global site tag (gtag.js), which serves as a single foundation for both Google Analytics and Ads. After you add the tag to your site, conversion and remarketing events are sent through the gtag function, and it is important to set the send_to parameter correctly with your conversion identifier.
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-CONVERSION_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-CONVERSION_ID');
// remarketing event
gtag('event', 'page_view', {
'send_to': 'AW-CONVERSION_ID',
'value': 199.00,
'items': [{'id': 'SKU-1', 'google_business_vertical': 'retail'}]
});
</script>The TikTok Pixel
The TikTok Pixel works on the same principle as Meta: first the base code is placed in the <head>, then events are sent through the ttq.track function. Because TikTok's audience skews younger, this pixel is especially important for e-commerce advertisers and mobile-app marketers who target a youthful demographic.
ttq.load('YOUR_TIKTOK_PIXEL_ID');
ttq.page();
// add-to-cart event
ttq.track('AddToCart', {
content_id: 'SKU-1',
content_type: 'product',
value: 199.00,
currency: 'USD'
});Tracking events: PageView, AddToCart, Purchase
Standard events allow ad platforms to understand user behavior and optimize conversions. For Meta, the three most important events are PageView, AddToCart, and Purchase. In the example below, the Purchase event is sent together with a value and currency, which the ad system needs in order to calculate ROAS and optimize bids effectively across your campaigns.
// Meta Purchase event
fbq('track', 'Purchase', {
value: 199.00,
currency: 'USD',
content_ids: ['SKU-1', 'SKU-2'],
content_type: 'product',
num_items: 2
});Conversions API (server-side)
Browser pixels lose part of their data because of ad blockers and cookie restrictions, so server-side tracking โ the Conversions API โ is becoming increasingly important. In this approach, events are sent not from the user's browser but directly from your server to the Meta or TikTok server. For deduplication, each event is assigned a unique event_id so that the browser and the server do not count the same event twice.
// PHP example: Meta Conversions API
$data = [
'data' => [[
'event_name' => 'Purchase',
'event_time' => time(),
'event_id' => 'order_10293',
'action_source' => 'website',
'user_data' => [
'em' => hash('sha256', 'client@example.com'),
'ph' => hash('sha256', '12025550123')
],
'custom_data' => ['currency' => 'USD', 'value' => 199.00]
]]
];
$ch = curl_init('https://graph.facebook.com/v19.0/PIXEL_ID/events?access_token=TOKEN');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_exec($ch);Note that user data such as email and phone is hashed with SHA-256, so personal information is never transmitted in plain text, yet Meta can still match it against the hash in its own database to identify the user reliably.
Privacy and consent (cookie banner)
GDPR and similar laws require obtaining explicit consent from the user before setting a pixel cookie. In practice this is implemented through a cookie banner: you do not load the pixel until the user clicks the "Accept" button, or you use Meta's Consent Mode. The approach below fires the pixel only after consent has been granted, which keeps your implementation compliant with data-protection regulations.
if (getConsent() === true) {
fbq('consent', 'grant');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
} else {
fbq('consent', 'revoke');
}Verification: Pixel Helper
To confirm that the installation is correct, use browser extensions: Meta Pixel Helper for Meta, Tag Assistant for Google, and TikTok Pixel Helper for TikTok. These tools show which pixels loaded on the page, which events were sent, and whether there are any errors in the parameters. For server-side events, verify them in the Test Events section inside Events Manager, making sure that deduplication by event_id works correctly. A properly configured pixel is the foundation for measuring the effectiveness of all your marketing campaigns.