About Soulcraft BD
Soulcraft BD is a Bangladeshi online clothing store selling formal shirts, denim, twill and cargo pants and premium seasonal collections. The storefront is a custom Next.js and React build rather than a standard ecommerce platform.
Project overview
Because the site is a single-page Next.js application, page changes happen through browser history rather than full page loads, and there is no ready-made plugin to send ecommerce events to Meta. The tracking had to be built on top of the site's own data layer in Google Tag Manager.
I implemented the Meta Pixel and Conversions API for the full shopping funnel, routed events through a server-side GTM container on Stape, and used the same stream for GA4 Enhanced eCommerce, so Meta and Analytics both see the same view, cart, checkout and purchase activity.
Goals
- Track PageView, ViewContent, AddToCart, InitiateCheckout and Purchase in Meta
- Send each event from both the browser Pixel and the Conversions API
- Get Facebook Pixel deduplication working for every paired event
- Feed GA4 Enhanced eCommerce from the same server-side stream
- Add session recordings to understand shopper behaviour
Challenges
- Custom Next.js storefront with no ecommerce platform integration to rely on
- Single-page navigation that needs history-change handling instead of normal page loads
- Browser-only Pixel events exposed to ad blockers and privacy features
- Keeping one consistent event stream for Meta and GA4
Strategy
I paired every browser Meta Pixel tag with a "Fb Server" GA4 event tag that sends the same interaction to a server-side GTM container on Stape. In the server container, a Conversions API tag and a GA4 ecommerce tag both run from the incoming GA4 client, so one server stream feeds Meta and Analytics, and shared event IDs let Meta deduplicate the browser and server copies.
What I implemented
Web GTM container
- Meta Pixel tags: Fb - Browser PageView, ViewContent, AddToCart, Checkout and Purchase
- Fb Server GA4 event tags for the same five events plus a server config tag
- Triggers built on the site data layer for view item, add to cart, checkout and purchase
- Microsoft Clarity tag on all pages
Server-side GTM on Stape
- Fb Conversions API Tag with event enhancement enabled
- Google Analytics GA4 - Ecommerce Tracking tag on the same GA4 client trigger
- Stape container running on the free plan
GA4 Enhanced eCommerce
- page_view, view_item, add_to_cart, begin_checkout and purchase events
- Purchase marked as a key event
- form_start and form_submit interactions also visible in GTM preview and GA4
Testing & validation
- Site technology confirmed with Wappalyzer: Next.js, React, GTM, GA4, Facebook Pixel and Clarity
- Web and server GTM previews run through a full test order
- GA4 DebugView and realtime reports checked event by event
- Meta test events checked for deduplicated browser and server pairs
Tools used
Results
- All 12 web GTM tags fired during a test purchase, with no tags left unfired
- Server GTM preview showed the Conversions API and GA4 ecommerce tags firing on page_view, view_item, add_to_cart, begin_checkout and purchase
- Conversions API requests returned POST 200 from Meta's Graph API
- PageView, View Content, Add to Cart, Initiate Checkout and Purchase received from browser and server in Meta, with the server copy deduplicated
- GA4 DebugView recorded the full view_item → add_to_cart → begin_checkout → purchase sequence
- Server-side GA4 tag strips Meta cookie and customer-data fields (email, phone, address) before sending to Analytics
