Skip to main content

Install Vibe Pixel on Adobe Commerce (previously Magento)

This guide will help you manually add the Vibe Pixel to your Adobe Commerce store (previously Magento).

Nicolas Hemidy avatar
Written by Nicolas Hemidy
Updated yesterday

This guide will help you manually add the Vibe Pixel to your Adobe Commerce store. By placing the Vibe JavaScript snippet directly in your store’s theme, you can start tracking user activity such as page views, leads, and purchases for retargeting purposes.

Step 1: Get Your Vibe Pixel Snippet

  1. Log in to your Vibe Dashboard.

  2. Navigate to Settings → Pixel.

  3. Choose your advertiser and click Setup.

  4. Copy the JavaScript snippet shown (typically includes the Page View event by default).

  5. Optionally, copy the Lead and Purchase snippets as well if you plan to track conversions.

For more details on event types, see: Vibe Pixel Documentation


Step 2: Add the Pixel Snippet to Your Adobe Commerce Theme

To ensure the Vibe Pixel loads on every page, you’ll insert the snippet into the HTML <head> section of your theme.

1. Go to Your Admin Panel

  • Log in to your Adobe Commerce admin.

  • Navigate to:

    Content → Design → Configuration

2. Edit Your Store View Theme

  • Select the relevant Store View (typically “Default Store View”) and click Edit on the right.

3. Add the Pixel to the Header

  • Scroll down to the HTML Head section.

  • In the Scripts and Style Sheets field, paste your Vibe Pixel snippet.

4. Save and Clear Cache

  • Click Save Configuration.

  • Go to System → Cache Management, then click Flush Adobe Commerce Cache to apply changes.


Step 3: Optional – Add Event Tracking on Specific Pages

You can add Lead or Purchase events by pasting their respective snippets into specific Adobe Commerce CMS pages or templates:

Add to Order Success Page:

To track purchases, paste the Purchase event snippet into the success page template:

  • Path:

    app/design/frontend/<Vendor>/<theme>/Magento_Checkout/templates/success.phtml

If you want to capture purchase values dynamically, replace the price placeholder:

value: INSERT_DYNAMIC_TOTAL

Use Adobe Commerce getOrderTotal() or equivalent methods depending on your setup.


Step 4: Validate That the Pixel Is Working

  1. Open your site in Chrome.

  2. Open DevTools (right-click → Inspect → Network tab).

  3. Refresh the page.

  4. Search for vbpx.js or s?aid=... calls.

  5. Confirm you see events like Page View, Lead, or Purchase.


Troubleshooting Tips

Issue

Solution

Pixel not firing

Make sure it’s placed inside the <head> section in Design Configuration

No events on conversion pages

Double-check the Lead/Purchase snippets are on the correct confirmation page

Still seeing no data

Clear all Adobe Commerce caches and verify with browser DevTools

Did this answer your question?