Server-side tagging enhances data privacy, improves data accuracy, and reduces dependency on client-side cookies. For BigCommerce, integrating GA4 and Facebook CAPI server-side requires building a robust tagging infrastructure.

🧱 Architecture

Customer Browser
|
| (1) Data Layer Push
| (2) JS fetch to custom BigCommerce API endpoint (proxy)
v
BigCommerce Custom Endpoint (Frontend)
|
| (3) Forward to GTM Server Container
v
GTM Server Container (App Engine or Cloud Run)
|
|—> Google Analytics 4
|
‘—> Facebook CAPI

🔧 Step 1: Set Up the GTM Server Container

A. Create GTM Server Container

1. Go to tagmanager.google.com.
2. Create a new container → choose Server.
3. Deploy via App Engine (recommended) or Cloud Run.
4. Follow Google’s wizard to deploy:

npx @google-cloud/functions-framework@latest 

B. Set Up Your Custom Domain (Recommended)

1. Set up a subdomain like gtm.mysite.com.
2. Update DNS.
3. Use a managed SSL certificate.

🛍️ Step 2: Create BigCommerce Proxy Endpoint

Why?

BigCommerce doesn’t allow direct server-side logic. So, use Stencil theme customization + a lightweight proxy API (e.g., Cloud Function or Lambda) to forward events from browser to GTM server.

A. Frontend JS: Capture Events

In your BigCommerce theme (templates/layout/base.html):

<script>
  window.dataLayer = window.dataLayer || [];

  function sendEventToServer(event) {
    fetch('https://your-api-proxy.com/track-event', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(event)
    });
  }

  // Example: Purchase Event
  document.addEventListener("DOMContentLoaded", function () {
    const orderData = {{checkout.order|json}};
    const event = {
      event_name: "purchase",
      currency: orderData.currency.code,
      value: orderData.order_amount,
      transaction_id: orderData.id,
      user_data: {
        email: orderData.customer.email
      },
      items: orderData.items.map(item => ({
        item_name: item.name,
        item_id: item.product_id,
        price: item.price_inc_tax,
        quantity: item.quantity
      }))
    };

    sendEventToServer(event);
  });
</script>

☁️ Step 3: Deploy the Proxy (Cloud Function Example)

Create an endpoint that forwards events to GTM Server.

// index.js

const fetch = require('node-fetch');

exports.trackEvent = async (req, res) => {
  const event = req.body;
  const GTM_SERVER_URL = 'https://gtm.mysite.com/collect';

  try {
    await fetch(GTM_SERVER_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-gtm-server': 'true'
      },
      body: JSON.stringify(event)
    });

    res.status(200).send({ success: true });
  } catch (e) {
    console.error(e);
    res.status(500).send({ error: 'Failed to forward event' });
  }
};

🏷️ Step 4: Configure GTM Server Container

A. Create Custom GA4 Tag (Server-Side)

1. Open GTM Server Container.
2. Add new GA4 Tag.
3. Use event parameters from the payload.
4. Set Measurement ID.

B. Facebook CAPI Tag

Use the official Facebook Conversion API Template in GTM server.

Setup Steps:

1. Go to Templates → Add Community Template → Search “Facebook Conversion API”.
2. Configure:
   • Pixel ID
   • Access Token
   • Event Name
   • User Data (email, IP, user agent)
3. Set up triggers based on event name (e.g., purchase).

🔐 Step 5: Facebook Access Token & Pixel Setup

1. Go to Facebook Events Manager.
2. Create Pixel → Click “Conversions API” setup.
3. Generate Access Token.
4. Add to GTM Server Tag.

📊 Step 6: Test and Validate

A. GTM Server Container Debug Mode

• Use Preview in GTM server.
• Send test events via your proxy.

B. Facebook Test Events

• Go to Events Manager → Select Pixel → Test Events.
• Confirm your CAPI events are received.

C. GA4 Realtime

• View events in Realtime under GA4.
• Use event_name filtering for confirmation.

✅ Bonus: Advanced Features

1. Email Hashing (SHA256 for Facebook)

Facebook requires hashed PII. Add this logic in your proxy:

const crypto = require('crypto');

function hashEmail(email) {
  return crypto.createHash('sha256').update(email.trim().toLowerCase()).digest('hex');
}

2. IP Address Forwarding

If you’re using Cloudflare or another proxy, make sure req.ip is forwarded via headers like x-forwarded-for.

🔍 Troubleshooting Tips

Issue	Solution
CAPI Events not received	Check access token, pixel ID, user data fields
GA4 Missing Events	Validate GTM server client config and measurement ID
GTM Server not reachable	Confirm DNS, SSL setup, and firewall rules

🧠 Conclusion

Implementing server-side tagging for BigCommerce with GA4 and Facebook CAPI provides better control, higher data accuracy, and improved privacy compliance. With GTM Server Container at the core, you create a future-proof, secure data pipeline.