Snapchat is a rapidly growing ad platform for eCommerce, especially among younger audiences. To track sales performance accurately and combat ad blockers and iOS restrictions, implementing both the Snapchat Pixel and Conversions API (CAPI) is essential.

🧰 Prerequisites

Requirement	Notes
OpenCart 3.x or 4.x	Template and backend access
Web GTM Installed	Add via header.twig
Server-Side GTM Setup	Use custom domain like gtm.yoursite.com
Snapchat Pixel ID & CAPI Token	Get from Snap Ads Manager
Consent Banner (optional)	For GDPR/CCPA compliance

---

🗂️ Tracking Plan

Tracked Events:

• Purchase (Complete Checkout)

Methods:

• Client-side Pixel → via GTM
• Server-side CAPI → via Server GTM

User Identifiers:

• Hashed email & phone
• IP address & User-Agent (automatically captured)

---

🔹 Step 1: Create Snapchat Pixel & Access Token

1. Go to Snapchat Ads Manager
2. Navigate to Events Manager
3. Select Web Events > Create Pixel
4. Generate API Token under “Conversions API Settings”

Save:

• Pixel ID (e.g., 0a12b3c4-5678-9def-1234-567890abcde1)
• Access Token

---

🔹 Step 2: Capture Purchase Data in OpenCart

Edit: catalog/controller/checkout/success.php

$order_id = $this->session->data['order_id'];
$order_info = $this->model_checkout_order->getOrder($order_id);
$products = $this->model_checkout_order->getOrderProducts($order_id);

$items = [];
foreach ($products as $product) {
  $items[] = [
    'item_id' => $product['model'],
    'item_name' => $product['name'],
    'quantity' => $product['quantity'],
    'price' => $product['price']
  ];
}

$email = strtolower(trim($order_info['email']));
$phone = preg_replace('/\D/', '', $order_info['telephone']);

$data['snap_event_data'] = json_encode([
  'event' => 'snap_purchase',
  'transaction_id' => $order_id,
  'value' => $order_info['total'],
  'currency' => $order_info['currency_code'],
  'content_ids' => array_column($items, 'item_id'),
  'email' => hash('sha256', $email),
  'phone' => hash('sha256', $phone),
  'event_id' => uniqid('snap_', true)
]);

---

🔹 Step 3: Inject dataLayer Push in success.twig

{% if snap_event_data %}
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({{ snap_event_data|raw }});
</script>
{% endif %}

✅ Now Web GTM can access purchase data and user identifiers.

---

🔹 Step 4: Configure Snapchat Pixel Tag in Web GTM

Use the Snap Pixel template from GTM Gallery:

1. Tag Type: Snap Pixel
2. Event Type: PURCHASE
3. Pixel ID: Your Pixel ID
4. Add parameters:
   • transaction_id: {{DL - transaction_id}}
   • value, currency, content_ids
   • event_id: {{DL - event_id}} (for deduplication)

Trigger: Custom Event equals snap_purchase

---

🔹 Step 5: Forward Event to Server-Side GTM

Add a fetch() call in the same tag (or create a separate tag):

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

✅ This forwards to the Server-Side GTM endpoint for server delivery to Snap.

---

🔹 Step 6: Configure Snapchat CAPI in Server-Side GTM

1. Import the Snapchat CAPI Tag Template
2. Fill in:

Field	Value
Pixel ID	Your Snap Pixel ID
Access Token	From Snapchat
Event Type	PURCHASE
Event ID	{{event_id}}
Value	{{value}}
Currency	{{currency}}
Content IDs	{{content_ids}}
Email	{{email}}
Phone	{{phone}}
Transaction ID	{{transaction_id}}
Action Source	website

Trigger: Event Name equals PURCHASE

---

🔹 Step 7: Deduplication

Snapchat uses event_id to deduplicate client + server events.

Ensure:

• Pixel and CAPI both include the same event_id
• Event IDs are unique per transaction and match on both ends

---

🧪 QA Tools & Debugging

Tool	Use
Server GTM → Preview	Inspect CAPI delivery
Chrome DevTools	Verify pixel & fetch()
Snapchat Events Manager	See “Received via API”
Postman (optional)	Test direct API if needed

---

🧠 Pro Tips

Tip	Reason
Hash email/phone in backend	Avoid exposing raw PII
Add snapclid cookie	Useful for future attribution matching
Log server response	Check for API errors from Snap
Include consent signal	To comply with privacy laws

---

📦 Architecture Summary

[OpenCart Success Page]
     ↓
[dataLayer → Web GTM]
     ↓                  ↘
[Snap Pixel]       [Fetch → Server GTM]
                           ↓
                     [Snapchat CAPI]

---