Skip to main content

Vibe Pixel Tracking with WordPress/Elementor/WooCommerce

Learn how to install the Vibe Pixel on your Wordpress website.

Vincent Paoli avatar
Written by Vincent Paoli
Updated this week

Here’s an improved version of your Help Center article that incorporates WooCommerce purchase tracking and keeps the tone consistent with the rest of your docs.

I’ve structured it so Elementor-only users still see the basic steps, but WooCommerce users get the extra guidance they need.


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.

  1. Log in to your WordPress Admin Dashboard.

  2. In the left-hand menu, go to Plugins → Add New.

  3. 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.

  4. Install and activate the plugin you prefer.

  5. Once activated, locate the section for adding custom scripts to the header (in WPCode, this is under Code Snippets → Add Snippet → Header & Footer).

  6. Paste your Vibe Web Tracking Code in the header section.

  7. Save or update the settings.

At this point, your base pixel will load on every page of your WordPress site.


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.

Did this answer your question?