Shopify Server-Side Tracking: Meta CAPI + GA4 with Cloudflare Workers (Free Setup)

Step 2 — Set Up Cloudflare Worker

 

2.1 Create a Free Account

Sign up at cloudflare.com. The free plan includes up to 100,000 Worker requests per day, which is more than sufficient for most Shopify stores.

2.2 Create the Worker

1. Go to Workers & Pages → Create → Start with Hello World.
2. Name the Worker: shopify-tracking-worker.
3. Click Deploy.
4. Open Edit Code and replace the default code with the following:

2.3 The Worker Code

const META_ACCESS_TOKEN = 'YOUR_META_ACCESS_TOKEN';
const META_PIXEL_ID = 'YOUR_PIXEL_ID';
const GA4_MEASUREMENT_ID = 'G-XXXXXXXXXX';
const GA4_API_SECRET = 'YOUR_GA4_API_SECRET';

export default {
async fetch(request, env) {

// Handle CORS preflight
if (request.method === 'OPTIONS') {
return new Response(null, {
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST',
'Access-Control-Allow-Headers': 'Content-Type'
}
});
}

if (request.method !== 'POST') {
return new Response('Method not allowed', { status: 405 });
}

try {
const body = await request.json();
const order = body.order || body;

// Filter 1: Only process paid orders
if (order.financial_status !== 'paid') {
return new Response(JSON.stringify({
status: 'skipped',
reason: `Order status: ${order.financial_status}`
}), { headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } });
}

// Filter 2: Only process online orders
// This blocks POS, draft orders, and admin-created orders
if (order.source_name !== 'web') {
return new Response(JSON.stringify({
status: 'skipped',
reason: `Non-web order skipped — source: ${order.source_name}`
}), { headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } });
}

// Read note_attributes (captured from browser via cart attributes)
const attributes = order.note_attributes || [];
const getAttr = (key) => attributes.find(a => a.name === key)?.value || null;

const gaClientId = getAttr('ga4_client_id');
const fbp = getAttr('_fbp');
const fbc = getAttr('_fbc');
const utmSource = getAttr('utm_source');
const utmMedium = getAttr('utm_medium');
const utmCampaign = getAttr('utm_campaign');
const utmContent = getAttr('utm_content');
const utmTerm = getAttr('utm_term');
const utmId = getAttr('utm_id');

// Customer and address data
const customer = order.customer || {};
const address = order.billing_address || order.shipping_address || {};

// Fallback to shipping address for guest checkouts
const firstName = customer.first_name || address.first_name || '';
const lastName = customer.last_name || address.last_name || '';
const phone = customer.phone || address.phone || order.phone || '';
const email = customer.email || order.email || '';
const city = address.city || '';
const zip = address.zip || '';
const country = address.country_code || '';

// SHA256 hashing — required by Meta for PII data
async function hashData(value) {
if (!value) return null;
const clean = value.toString().toLowerCase().trim();
const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(clean));
return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join('');
}

const [hEmail, hPhone, hFname, hLname, hCity, hZip, hCountry] = await Promise.all([
hashData(email), hashData(phone), hashData(firstName),
hashData(lastName), hashData(city), hashData(zip),
country ? hashData(country.toLowerCase()) : null
]);

// Line items
const lineItems = (order.line_items || []).map(item => ({
item_id: item.sku || String(item.variant_id),
item_name: item.title,
price: parseFloat(item.price),
quantity: parseInt(item.quantity, 10)
}));

// GA4 Client ID — use captured value or generate fallback
const finalClientId = gaClientId ||
`${Math.floor(1000000000 + Math.random() * 9000000000)}.${customer.id || order.id}`;

// ── META CONVERSIONS API PAYLOAD ──
const metaPayload = {
data: [{
event_name: 'Purchase',
event_time: Math.floor(Date.now() / 1000),
event_id: `purchase_${order.id}`, // For deduplication
action_source: 'website',
event_source_url: 'https://your-store.myshopify.com',
user_data: {
...(hEmail && { em: [hEmail] }),
...(hPhone && { ph: [hPhone] }),
...(hFname && { fn: [hFname] }),
...(hLname && { ln: [hLname] }),
...(hCity && { ct: [hCity] }),
...(hZip && { zp: [hZip] }),
...(hCountry && { country: [hCountry] }),
...(fbp && { fbp }),
...(fbc && { fbc }),
},
custom_data: {
currency: order.currency || 'USD',
value: parseFloat(order.total_price || 0),
order_id: String(order.id),
content_type: 'product',
contents: lineItems.map(i => ({
id: i.item_id,
quantity: i.quantity,
item_price: i.price
}))
}
}],
access_token: META_ACCESS_TOKEN
};

// ── GA4 MEASUREMENT PROTOCOL PAYLOAD ──
const ga4Payload = {
client_id: finalClientId,
...(customer.id && { user_id: String(customer.id) }),
events: [{
name: 'purchase',
params: {
transaction_id: order.name, // e.g. #1234
value: parseFloat(order.total_price || 0),
currency: order.currency || 'USD',
tax: parseFloat(order.total_tax || 0),
shipping: parseFloat(order.shipping_lines?.[0]?.price || 0),
engagement_time_msec: 1,
...(utmId && { campaign_id: utmId }),
...(utmCampaign && { campaign: utmCampaign }),
...(utmSource && { source: utmSource }),
...(utmMedium && { medium: utmMedium }),
...(utmContent && { content: utmContent }),
...(utmTerm && { term: utmTerm }),
items: lineItems
}
}]
};

// ── SEND BOTH IN PARALLEL ──
const [metaRes, ga4Res] = await Promise.all([
fetch(`https://graph.facebook.com/v18.0/${META_PIXEL_ID}/events`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(metaPayload)
}),
fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${GA4_MEASUREMENT_ID}&api_secret=${GA4_API_SECRET}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(ga4Payload)
})
]);

const metaResult = await metaRes.json();
console.log('Meta Response:', JSON.stringify(metaResult));
console.log('GA4 HTTP Status:', ga4Res.status); // 204 = success

return new Response(JSON.stringify({
status: 'success',
meta: metaResult,
ga4_status: ga4Res.status
}), {
headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }
});

} catch (err) {
console.error('Worker error:', err.message);
return new Response(JSON.stringify({
status: 'error',
message: err.message
}), {
status: 500,
headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }
});
}
}
};

Step 3 — Configure Shopify Webhook

In your Shopify admin, navigate to:

Settings → Notifications → Webhooks → Create Webhook

Event	Order payment (Critical: NOT “Order creation”)
Format	JSON
URL	https://your-worker.workers.dev

Using Order payment instead of Order creation is important because the webhook only fires after payment has been successfully confirmed. This helps filter out most draft, abandoned, and pending orders.

---

Step 4 — Get Your Meta Access Token

1. Open Business Manager → Events Manager.
2. Select your Meta Pixel.
3. Click Settings → Generate Access Token.
4. Copy the generated token.
5. Paste the token into your Cloudflare Worker code.

---

Step 5 — Get Your GA4 API Secret

1. Open Google Analytics → Admin → Data Streams.
2. Select your website data stream.
3. Navigate to Measurement Protocol API Secrets.
4. Click Create.
5. Provide a name for the secret and save it.
6. Copy the generated secret value.
7. Paste the secret into your Cloudflare Worker code.