This guide explains how to embed a Track123 tracking page into a headless Shopify storefront. You only need to insert a small piece of code into the page where you want the tracking page to appear.
Prerequisites
An active Shopify store
Track123 app installed
A headless frontend (for example, React / Next.js)
Step 1: Load the Track123 Widget Script and Add the Component
Load the Track123 widget script once and insert the <track123-tracking-widget /> component into your page.
Below is a React example:
import { useEffect } from 'react'
export default function TrackingWidget() {
useEffect(() => {
const script = document.createElement('script')
script.src = 'http://shp.track123.com/tracking-page/build/widget.min.js'
document.body.appendChild(script)
return () => {
document.body.removeChild(script)
}
}, [])
return (
/*
Parameters:
- shopifyDomain (required): Your Shopify store domain
- locale (optional): Language code (defaults to store language)
*/
<track123-tracking-widget
shopifyDomain="track123-test.myshopify.com"
locale="zh-CN"
/>
)
}Parameters
Parameter | Required | Description |
shopifyDomain | Yes | Your Shopify store domain (e.g. xxx.myshopify.com) |
locale | No | Language code (e.g. en, zh-CN). Defaults to store language |
Step 2: Configure Content Security Policy (CSP)
If your headless framework enforces CSP, you must allow Track123-related resources.
Add the following rules to your CSP configuration:
// API requests
connectSrc: [
"http://shp.track123.com",
],
// Scripts
scriptSrc: [
"http://shp.track123.com",
"https://*.google.com",
"https://*.googleapis.com",
"https://applepay.cdn-apple.com",
],
// Images
imgSrc: [
"https://xinglian-prod-1254213275.cos.accelerate.myqcloud.com",
],
// Iframes
frameSrc: [
"https://*.google.com",
]
Do I Need to Configure CSP?
Not always. CSP configuration is only required if your project already enables Content Security Policy.
When CSP Is Required?
Project Type | Required |
Shopify Hydrogen | ✅ Yes (strict CSP by default) |
Next.js (App / Pages Router) | ⚠️ Depends on your CSP setup |
Remix | ⚠️ Depends on your CSP setup |
Create React App | ❌ No |
Vite (React) | ❌ No |
Notes
If your project does not use CSP, you can skip Step 2.
If the widget fails to load and the browser console shows CSP errors, CSP configuration is required.
Hydrogen storefronts must always configure CSP to allow Track123 resources.
Done
Once the script is loaded and CSP is configured, the Track123 tracking page will render automatically where the component is placed.
If you have questions or need assistance, contact Track123 support.