Meta Pixel Setup for CS-Cart (Step-by-Step) | OpsBlu Docs

Meta Pixel Setup for CS-Cart (Step-by-Step)

Complete guide to installing and configuring Meta Pixel (Facebook Pixel) on CS-Cart for conversion tracking and audience building

Meta Pixel (formerly Facebook Pixel) enables you to track conversions, optimize ads, and build targeted audiences for Facebook and Instagram campaigns. This guide shows you how to implement it on your CS-Cart store.

What is Meta Pixel?

Meta Pixel is a piece of code that tracks visitor actions on your CS-Cart store. It helps you:

  • Track conversions from Facebook and Instagram ads
  • Build custom audiences for retargeting
  • Optimize ad delivery to people likely to convert
  • Measure cross-device conversions
  • Access detailed analytics in Meta Events Manager

Prerequisites

Before you begin:

  • Admin access to your CS-Cart store
  • Meta Business Manager account
  • Meta Pixel created (or ability to create one)
  • Your Pixel ID

Step 1: Create Meta Pixel

If you don't have a Meta Pixel yet:

  1. Go to Meta Events Manager
  2. Click Connect Data Sources
  3. Select Web
  4. Choose Meta Pixel
  5. Name your pixel
  6. Enter your website URL
  7. Click Continue
  8. Copy your Pixel ID (format: 16 digits)

Step 2: Install Meta Pixel Base Code

Add the Meta Pixel base code to your CS-Cart theme.

File: design/themes/[your_theme]/templates/blocks/head_scripts.tpl

{* Meta Pixel Base Code *}
{literal}
<!-- Meta Pixel Code -->
<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>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
{/literal}

Replace YOUR_PIXEL_ID with your actual 16-digit Pixel ID.

If you have GTM installed, use it to manage Meta Pixel.

In GTM:

  1. Go to Tags → New
  2. Name: "Meta Pixel - Base Code"
  3. Tag Type: Custom HTML
  4. Paste the Meta Pixel code
  5. Triggering: All Pages
  6. Click Save
  7. Submit and Publish the container

Benefits of using GTM:

  • Easy to update without code changes
  • Better testing with Preview mode
  • Manage multiple pixels from one interface

Method 3: Using CS-Cart Add-on

CS-Cart's official Marketplace includes a Facebook Pixel add-on:

  1. Go to Add-ons → Manage add-ons → Browse all available add-ons
  2. Search for "Facebook Pixel" — the official add-on supports base pixel installation and standard ecommerce events (ViewContent, AddToCart, Purchase)
  3. Install the add-on and enter your Pixel ID in its settings
  4. The add-on handles base code injection and fires ecommerce events automatically based on CS-Cart's checkout flow

Step 3: Clear Cache

After installation:

  1. Go to Administration → Storage → Clear cache
  2. Select All
  3. Click Clear

Step 4: Verify Installation

Using Meta Pixel Helper

  1. Install Meta Pixel Helper Chrome extension
  2. Navigate to your CS-Cart store
  3. Click the Pixel Helper icon
  4. Verify your pixel is detected and firing

Successful installation shows:

Using Events Manager

  1. Go to Meta Events Manager
  2. Select your Pixel
  3. Click Test Events
  4. Enter your store URL
  5. Navigate your site
  6. Verify events appear in real-time

Check Browser Console

  1. Open Developer Tools (F12)
  2. Go to Network tab
  3. Filter by "facebook"
  4. Reload the page
  5. Look for requests to facebook.com/tr

Advanced Setup Options

Advanced Matching improves attribution by matching website visitors to Facebook users.

fbq('init', 'YOUR_PIXEL_ID', {
  em: 'email@example.com', // Email (hashed)
  fn: 'john', // First name
  ln: 'doe', // Last name
  ph: '1234567890', // Phone number
  external_id: 'user_id' // Your internal user ID
});

For CS-Cart with user data:

{if $auth.user_id}
{literal}
<script>
fbq('init', '{/literal}YOUR_PIXEL_ID{literal}', {
  {/literal}
  {if $user_info.email}
  em: '{$user_info.email|escape:javascript}',
  {/if}
  {if $user_info.firstname}
  fn: '{$user_info.firstname|escape:javascript|lower}',
  {/if}
  {if $user_info.lastname}
  ln: '{$user_info.lastname|escape:javascript|lower}',
  {/if}
  {if $user_info.phone}
  ph: '{$user_info.phone|regex_replace:"/[^0-9]/":""}',
  {/if}
  {literal}
  external_id: '{/literal}{$auth.user_id}{literal}'
});
</script>
{/literal}
{else}
{literal}
<script>
fbq('init', 'YOUR_PIXEL_ID');
</script>
{/literal}
{/if}

Important: Ensure this complies with your privacy policy and GDPR requirements.

Automatic Advanced Matching

Enable in Meta Events Manager:

  1. Go to Settings → Advanced Matching
  2. Toggle on Automatic Advanced Matching
  3. Meta will automatically match common form fields

Multiple Pixels

If tracking for multiple accounts (marketplace + vendors):

// Initialize multiple pixels
fbq('init', 'MAIN_PIXEL_ID');
fbq('init', 'VENDOR_PIXEL_ID');

// Track events to both
fbq('track', 'PageView');

For CS-Cart Multi-Vendor:

{literal}
<script>
// Main marketplace pixel
fbq('init', 'MAIN_PIXEL_ID');

{/literal}
{if $company_data.company_id && $company_data.fb_pixel_id}
// Vendor-specific pixel
fbq('init', '{$company_data.fb_pixel_id}');
{/if}
{literal}

// Track to all pixels
fbq('track', 'PageView');
</script>
{/literal}

Conversion API (Server-Side Tracking)

For improved accuracy and iOS 14+ privacy changes, implement Conversions API.

Why Use Conversions API?

  • Bypass browser tracking limitations (iOS 14+, ad blockers)
  • Improve attribution accuracy
  • Deduplicate events with browser pixel
  • Better data quality

Implementation Steps

Option 1: Using CS-Cart Webhook

Create a custom add-on to send events server-side:

<?php
// File: app/addons/meta_conversions_api/func.php

use Tygh\Registry;

function fn_meta_conversions_api_place_order_post($order_id, $action, $order_status, $cart, $auth) {
    if ($order_status == 'P') { // Paid status
        $order_info = fn_get_order_info($order_id);

        // Build Conversions API event
        $event_data = [
            'data' => [
                [
                    'event_name' => 'Purchase',
                    'event_time' => time(),
                    'action_source' => 'website',
                    'event_source_url' => Registry::get('config.current_location'),
                    'user_data' => [
                        'em' => hash('sha256', strtolower($order_info['email'])),
                        'ph' => hash('sha256', preg_replace('/[^0-9]/', '', $order_info['phone'])),
                        'fn' => hash('sha256', strtolower($order_info['b_firstname'])),
                        'ln' => hash('sha256', strtolower($order_info['b_lastname'])),
                        'ct' => hash('sha256', strtolower($order_info['b_city'])),
                        'st' => hash('sha256', strtolower($order_info['b_state'])),
                        'zp' => hash('sha256', $order_info['b_zipcode']),
                        'country' => hash('sha256', strtolower($order_info['b_country'])),
                    ],
                    'custom_data' => [
                        'currency' => $order_info['currency'],
                        'value' => $order_info['total'],
                        'content_type' => 'product',
                        'contents' => array_map(function($product) {
                            return [
                                'id' => $product['product_id'],
                                'quantity' => $product['amount'],
                                'item_price' => $product['price']
                            ];
                        }, $order_info['products'])
                    ],
                    'event_id' => 'order_' . $order_id // For deduplication
                ]
            ]
        ];

        // Send to Meta Conversions API
        $access_token = 'YOUR_CONVERSIONS_API_ACCESS_TOKEN';
        $pixel_id = 'YOUR_PIXEL_ID';

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, "https://graph.facebook.com/v18.0/$pixel_id/events");
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query([
            'data' => json_encode($event_data['data']),
            'access_token' => $access_token
        ]));
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

        $response = curl_exec($ch);
        curl_close($ch);
    }
}

Option 2: Using GTM Server-Side

  1. Set up GTM Server-Side container
  2. Configure Meta Conversions API tag
  3. Send events from CS-Cart to GTM server
  4. GTM forwards to Meta Conversions API

Event Deduplication

Use event_id to prevent duplicate tracking:

Browser Pixel:

fbq('track', 'Purchase', {
  value: 99.99,
  currency: 'USD'
}, {
  eventID: 'order_12345'
});

Conversions API:

{
  "event_id": "order_12345",
  "event_name": "Purchase"
}

Privacy and Compliance

GDPR Compliance

Respect user consent preferences:

// Don't initialize pixel until consent is granted
function initMetaPixel() {
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
}

// Check CS-Cart cookie consent
if (typeof Tygh !== 'undefined' && Tygh.consent_accepted) {
  initMetaPixel();
}

// Listen for consent changes
$(document).on('click', '.cm-btn-cookie-consent', function() {
  if (typeof fbq === 'undefined') {
    initMetaPixel();
  }
});

Limited Data Use (LDU)

For California users (CCPA compliance):

fbq('dataProcessingOptions', ['LDU'], 1, 1000); // California

fbq('consent', 'revoke');

Testing Your Installation

Test Events Tool

  1. In Events Manager, click Test Events
  2. Open your CS-Cart store
  3. Perform actions (view product, add to cart, etc.)
  4. Verify events appear in Test Events
  5. Check for errors or warnings

Pixel Helper Diagnostics

Common issues shown in Pixel Helper:

  • No Pixel Found - Installation failed
  • Pixel Did Not Load - JavaScript error
  • Encoded Characters - Check escaping in Smarty templates
  • Duplicate Pixel - Multiple pixel codes installed

Browser Console Debugging

Enable debug mode:

// Add before fbq('init')
fbq('set', 'autoConfig', false, 'YOUR_PIXEL_ID');
fbq('set', 'debug', true);

Check console for:

  • Pixel initialization
  • Event firing
  • Parameter values

Troubleshooting

Pixel Not Firing

Check:

  1. Pixel code is in <head> section
  2. Pixel ID is correct
  3. No JavaScript errors in console
  4. Cache is cleared
  5. Ad blockers disabled for testing

Events Not Tracking

Solutions:

  1. Verify event code syntax
  2. Check if events are after pixel initialization
  3. Ensure parameters are formatted correctly
  4. Test with Pixel Helper

Duplicate Events

Common causes:

  1. Multiple pixel installations
  2. Pixel code in multiple templates
  3. Both manual and GTM implementation

Fix:

  • Remove duplicate installations
  • Use only one implementation method
  • Search templates for fbq(

Advanced Matching Not Working

Verify:

  1. User data is available when pixel initializes
  2. Email is in valid format
  3. Names are lowercase
  4. Phone numbers contain only digits
  5. Data is properly hashed (if manually hashing)

iOS 14+ Attribution Issues

Solutions:

  1. Implement Conversions API
  2. Use Aggregated Event Measurement
  3. Verify domain in Business Manager
  4. Configure 8 priority events

Performance Optimization

Lazy Loading

For non-critical pages, lazy load Meta Pixel:

// Load pixel after page load
window.addEventListener('load', function() {
  // Meta Pixel code here
});

Async Loading

Pixel loads asynchronously by default, but ensure other scripts don't block it.

Next Steps

Now that Meta Pixel is installed:

  1. Configure Event Tracking - Track conversions and custom events
  2. Set up Catalog Sales - Dynamic product ads
  3. Create Custom Audiences - Retargeting campaigns
  4. Configure Conversions API - Server-side tracking

Additional Resources

Nach oben