Checkout & analytics
Visitors add items, check out through Shopify, and every interaction is tracked — from first page view through order completion.
Checkout flow
- Visitor adds items via
FmCartAddButton - Framerce manages cart state client-side and syncs it to Shopify via the Storefront API
- Visitor clicks checkout (
FmCartCheckout) and Shopify handles payment, shipping, and order creation
Framerce creates the cart and hands off to Shopify's secure hosted checkout.
Analytics
Framerce tracks standard e-commerce events automatically. Every component interaction — viewing a product, adding to cart, starting checkout — fires a canonical event that each provider translates to its own format.
| Event | Trigger |
|---|---|
page_viewed | Page load |
product_viewed | Product detail page |
product_added_to_cart | Add to cart click |
product_removed_from_cart | Remove from cart |
cart_viewed | Cart drawer opened |
checkout_started | Checkout button clicked |
checkout_completed | Order confirmed (via Web Pixel) |
Why this matters
These events power three outcomes:
- Conversion optimization — See where visitors drop off (viewed → carted → checked out) and fix the bottleneck
- Ad attribution — Triple Whale tracks which ad brought each visitor, through to purchase, so you know your actual return on ad spend
- Retargeting — PostHog and Triple Whale build audiences from event data (e.g., "added to cart but didn't buy") for retargeting campaigns
Supported providers
| Provider | Role | Setup |
|---|---|---|
| PostHog | Product analytics, funnels, session replays | Enter project API key in plugin settings |
| Triple Whale | Ad spend attribution, ROAS tracking | Enter pixel ID in plugin settings |
| Shopify | Native checkout tracking via Web Pixel | Automatic — reads cart attributes and cookies |
Identity across checkout
Shopify's checkout runs on a separate domain, which normally breaks tracking. Framerce preserves identity through the redirect:
- A device ID is stored in the visitor's browser and synced to Shopify cart attributes
- The checkout URL is decorated with the device ID as a query parameter
- Shopify's Web Pixel reads the ID on the checkout page and links it back to the pre-checkout session
UTM parameters from the visitor's original landing are preserved through the same mechanism.
Configure providers
Enter your PostHog project key or Triple Whale pixel ID in the Framerce plugin settings. The bootloader initializes each provider and the runtime dispatches events as visitors interact with components.
Events not appearing?
Verify your provider key in the plugin settings. For PostHog, check that your project key matches the one in PostHog → Settings → Project API Key.
What's next
- Components Overview — Browse all available components
- Shopify Store Setup — Configure API tokens and Shopify Markets