Skip to main content

Vibe Pixel Tracking with WordPress/Elementor/WooCommerce

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

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.

Finding Your Vibe Pixel Code

Before you install anything on your site, grab your pixel code from your Vibe account:

  1. Log in to your Vibe.co account.

  2. Click your username in the top-right corner.

  3. Select Tracking.

  4. Click Set up a pixel (or Manage a pixel if one already exists for this advertiser).

  5. Under Installation method, select WordPress, Elementor, or WooCommerce — whichever matches your setup.

  6. On the Page view event tab, copy your base pixel script. It will look like this, with your own pixel ID in place of the placeholder:

<script>
  !function(v,i,b,e,c,o){if(!v[c]){var s=v[c]=function(){s.process?s.process.apply(s,arguments):s.queue.push(arguments)};s.queue=[],s.b=1*new Date;var t=i.createElement(b);t.async=!0,t.src=e;var n=i.getElementsByTagName(b)[0];n.parentNode.insertBefore(t,n)}}(window,document,"script","https://s.vibe.co/vbpx.js","vbpx");
  vbpx('init', 'YOUR_PIXEL_ID');
  vbpx('event', 'page_view');
</script>

Use the Additional events tab to find the Lead event and Purchase event snippets for your platform — see the sections below for how to implement those.

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

Grab your Lead event snippet from Additional events → Lead event in the pixel setup flow above, then implement it using one of the options below.

Option A — Using WPCode with Smart Conditional Logic

  1. Install and activate WPCode (if not already installed).

  2. Go to Code Snippets → Add Snippet.

  3. Choose "Add Your Custom Code (New Snippet)".

  4. Paste your Vibe Lead Pixel code.

  5. Set Location = Header.

  6. Scroll to Smart Conditional Logic.

  7. Turn it on and set:

    • "Show" → Page

    • Select the exact page (e.g., your "Thank You" page)

  8. Save and activate the snippet.

Option B — Using a Custom HTML Block

  1. In WordPress, edit the specific page where you want to track leads.

  2. Add a Custom HTML block to the page.

  3. Paste your Vibe Lead Pixel code in the block.

  4. 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 purchase value to Vibe for more precise campaign reporting and ROAS tracking. Vibe records purchase value in USD — if your store transacts in another currency, convert the order total to USD before passing it along (there is no separate currency field).

Grab your Purchase event snippet from Additional events → Purchase event in the pixel setup flow above, then implement it using one of the options below.

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, ecommerce: { /* ... */ } });

In GTM:

  • Create a Custom Event Trigger where Event name = purchase.

  • Create a Data Layer Variable for value (transaction amount).

  • In your Vibe Purchase Pixel tag, map:

    • Price USD = {{DLV – value}}

  • 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();
    ?>
    <script>
    vbpx('event', 'purchase', {
        'price_usd': <?php echo json_encode($total); ?>,
        'purchase_id': <?php echo json_encode((string) $order_id); ?>
    });
    </script>
    <?php
});

This will automatically send the purchase event with the correct value and currency whenever an order is completed.

Where to paste it: Open your theme's functions.php file (via Appearance → Theme File Editor, or your code snippets plugin if direct theme editing is disabled). Scroll to the very bottom of the file and paste the snippet after any other custom code you or a previous developer has already added there — don't paste it in the middle of, or inside, another function. It should sit as its own separate block, below everything else.

Related Articles
Did this answer your question?