Setting up Facebook Pixel and Facebook Conversions API (CAPI) using both client-side (GTM Web) and server-side (GTM Server) in OpenCart ensures reliable, deduplicated event tracking for Meta Ads. This setup helps overcome browser restrictions, improve attribution, and increase match rates.

🧰 Prerequisites

• OpenCart (v3.x or 4.x)
• Google Tag Manager (Web + Server containers)
• Facebook Business Manager access
• Facebook Pixel ID and Access Token
• HTTPS-enabled domain
• Consent mechanism (for GDPR/CCPA compliance)

---

🧱 Step 1: Install Facebook Pixel via GTM (Web)

1. Go to your GTM Web Container
2. Create a new tag:
   • Tag Type: Custom HTML
   • Trigger: All Pages

<!-- Facebook Pixel Base 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>

---

💳 Step 2: Push Purchase Event in OpenCart

In catalog/view/theme/YOUR_THEME/template/checkout/success.twig, after order confirmation:

<script>
  dataLayer = dataLayer || [];
  dataLayer.push({
    event: "purchase",
    transaction_id: "{{ order_id }}",
    value: {{ order_total }},
    currency: "{{ currency }}",
    email: "{{ email | lower | trim | sha256 }}",
    phone: "{{ phone | regex_replace('/\D/', '') | sha256 }}",
    event_id: "fb_{{ order_id }}"
  });
</script>

---

🌐 Step 3: Send Server-Side Payload via Web GTM

Create a new Custom HTML tag in GTM Web:

• Trigger: Event equals purchase

<script>
fetch('https://gtm.yourdomain.com/event', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    event_name: 'Purchase',
    event_id: '{{DL - event_id}}',
    transaction_id: '{{DL - transaction_id}}',
    value: '{{DL - value}}',
    currency: '{{DL - currency}}',
    email: '{{DL - email}}',
    phone: '{{DL - phone}}'
  })
});
</script>

---

📡 Step 4: Facebook CAPI in GTM Server Container

1. Create a new Tag:
   • Tag Type: HTTP Request
   • Trigger: Custom event with event_name = Purchase
2. Add the following payload:

POST https://graph.facebook.com/v18.0/YOUR_PIXEL_ID/events?access_token=ACCESS_TOKEN
{
  "data": [{
    "event_name": "Purchase",
    "event_time": {{timestamp}},
    "event_id": "{{event_id}}",
    "action_source": "website",
    "user_data": {
      "em": "{{email}}",
      "ph": "{{phone}}"
    },
    "custom_data": {
      "currency": "{{currency}}",
      "value": {{value}},
      "transaction_id": "{{transaction_id}}"
    }
  }]
}

---

🔁 Step 5: Deduplication & Attribution

• Ensure event_id is the same on both browser pixel and CAPI
• Facebook will automatically deduplicate and attribute to the first successful event

---

🔐 Step 6: Consent Handling (GDPR/CCPA)

If using a consent management platform (CMP):

• Delay dataLayer push until consent is granted
• Use a flag like consent_granted = true in GTM to control tag firing

---

🧪 Step 7: Test & Validate

Platform	Tool
GTM	Preview mode (Web + Server)
Facebook	Events Manager → Test Events tab
Chrome	Facebook Pixel Helper extension

---

🎯 Final Benefits

• Server-side event delivery = more resilient to browser restrictions
• Higher match rates with hashed email/phone
• Accurate attribution with deduplication via event_id
• Consent-aware and privacy-safe

---