Vibe Pixel Tracking with WordPress, Elementor, and WooCommerce
Pixel tracking lets you measure how many of your CTV ad viewers visit your website within your chosen attribution window. To get accurate results, it’s important to follow the correct implementation steps.
Installing the Vibe Pixel in WordPress / Elementor / Woocommerce
The easiest way to add the Vibe pixel in WordPress is to use a plugin so you don’t have to edit your theme files directly.
Log in to your WordPress Admin Dashboard.
In the left-hand menu, go to Plugins → Add New.
In the search bar, type the name of a plugin that allows you to insert scripts or modify the header—WPCode is a popular option.
Install and activate the plugin you prefer.
Once activated, locate the section for adding custom scripts to the header (in WPCode, this is under Code Snippets → Add Snippet → Header & Footer).
Paste your Vibe Web Tracking Code in the header section.
Save or update the settings.
At this point, your base pixel will load on every page of your WordPress site.
Enabling Lead Event Tracking on Specific Pages
If you want to track leads by firing the Lead Event on a specific page (such as a form submission "Thank You" page), you can add the pixel to only that page.
Option A — Using WPCode with Smart Conditional Logic
Install and activate WPCode (if not already installed).
Go to Code Snippets → Add Snippet.
Choose "Add Your Custom Code (New Snippet)".
Paste your Vibe Lead Pixel code.
Set Location = Header.
Scroll to Smart Conditional Logic.
Turn it on and set:
"Show" → Page
Select the exact page (e.g., your "Thank You" page)
Save and activate the snippet.
Option B — Using a Custom HTML Block
In WordPress, edit the specific page where you want to track leads.
Add a Custom HTML block to the page.
Paste your Vibe Lead Pixel code in the block.
Save or publish the page.
Enabling Purchase Event Tracking for WooCommerce
If you’re running WooCommerce, you can also track completed orders by firing the Purchase Event on the order confirmation (thank-you) page.
This lets you send value and currency to Vibe for more precise campaign reporting.
Option A — Using Google Tag Manager (recommended)
Make sure WooCommerce is sending GA4 purchase events to the dataLayer. Most GA4 plugins for WooCommerce do this automatically.
You should see something like this on the thank-you page:
dataLayer.push({ event: 'purchase', value: 123.45, currency: 'USD', ecommerce: { /* ... */ } });
In GTM:
Create a Custom Event Trigger where Event name = purchase.
Create Data Layer Variables for:
value (transaction amount)
currency
In your Vibe Purchase Pixel tag, map:
Value = {{DLV – value}}
Currency = {{DLV – currency}}
Set the trigger to fire on purchase.
Option B — Without GTM (direct WooCommerce hook)
If you’re not using GTM, you can add this snippet to your theme’s functions.php file or a small custom plugin:
add_action('woocommerce_thankyou', function($order_id){ if (!$order_id) return; $order = wc_get_order($order_id); if (!$order) return; $total = (float) $order->get_total(); $currency = $order->get_currency(); ?> <script> window.vibeq = window.vibeq || []; window.vibeq.push(['track','Purchase', { value: <?php echo json_encode($total); ?>, currency: <?php echo json_encode($currency); ?> }]); </script> <?php });This will automatically send the purchase event with the correct value and currency whenever an order is completed.