How to Install Analytics on Shopify, Webflow, Framer & Ghost
No-code platforms make it dead simple to launch a site without knowing code. But the moment you ship, you need to understand your traffic. Where are visitors coming from? What pages do they visit? Where do they drop off?
The good news: adding analytics to Shopify, Webflow, Framer, or Ghost takes less than 3 minutes per platform. No dependencies, no plugin installations, no configurations. Just a script tag in the right place.
This guide walks you through each platform step-by-step, with screenshots and exact locations so you can copy-paste your way to full analytics.
Why You Want Analytics on Your No-Code Site
When you build on a no-code platform, you lose direct access to your server. You can't install plugins (well, Shopify has apps, but most analytics apps are bloated or expensive). You need analytics that work within the platform constraints.
Here's why it matters:
- Understand your traffic. Which pages are people visiting? What's your bounce rate? Where do they go after the homepage?
- Track conversions. Shopify tracks orders natively, but what about email sign-ups, demo requests, or PDF downloads?
- Optimize your funnel. See where visitors drop off and double-check your pages are actually converting.
- Find top performers. Know which pages drive the most traffic and revenue.
All of this is visible in your analytics dashboard without leaving Statalog. And the setup is stupid simple.
Shopify
Shopify is built for non-technical store owners, so the analytics setup is designed to be foolproof.
Step 1: Get Your Tracking Code
- Log in to Statalog
- Click Settings → Install Code
- Copy the script code (it looks like):
<script defer src="https://cdn.statalog.com/tracker.min.js"></script>
<script>
window.statalogConfig = {
siteId: 'your_site_id_here',
hashMode: false
};
</script>
Step 2: Add Code to Shopify Theme
- Go to Shopify admin → Sales channels → Online Store → Themes
- Find your active theme and click Edit code (or the
<>icon) - On the left sidebar, open theme.liquid (the main layout file)
- Scroll to the closing
</head>tag near the top (around line 50-100, depending on your theme) - Paste your script just before
</head>:
<!-- Analytics -->
<script defer src="https://cdn.statalog.com/tracker.min.js"></script>
<script>
window.statalogConfig = {
siteId: 'your_site_id_here',
hashMode: false
};
</script>
- Click Save (top right)
- Wait 5-10 seconds for the theme to reload
That's it. Your Shopify store is now sending analytics data.
Step 3: Verify It's Working
Open your store in an incognito window and check the Network tab:
- Open your store URL (e.g.,
mystore.myshopify.com) - Right-click → Inspect → Network tab
- Reload the page
- Look for a request to
statalog.com/collector your custom domain - If you see it, analytics are live
Shopify Notes
- Checkout tracking: The tracker works on product pages, collection pages, and the checkout page. Conversion tracking (when someone places an order) happens automatically if you enable order tracking.
- Conflicts: Shopify's native analytics will still run alongside your tracker. Both will collect data. That's fine—they serve different purposes.
- Theme updates: If Shopify releases a theme update, your code will remain in
theme.liquid(Shopify doesn't overwrite custom code). - Custom domains: If you use a custom domain (not
myshopify.com), analytics still work the same way.
Webflow
Webflow is a visual builder with more control than Shopify, but the analytics setup is even simpler.
Step 1: Get Your Tracking Code
Same as Shopify—copy the script from Statalog → Settings → Install Code.
Step 2: Add Code to Webflow
- Go to your Webflow project dashboard
- Click Settings (gear icon, bottom left)
- Scroll to Custom Code
- Paste your script in the Head Code section:
<script defer src="https://cdn.statalog.com/tracker.min.js"></script>
<script>
window.statalogConfig = {
siteId: 'your_site_id_here',
hashMode: false
};
</script>
- Click Save
Step 3: Verify in Real-time
Webflow gives you a live preview:
- Click Preview (top right, the eye icon)
- Your site opens in a new tab
- Right-click → Inspect → Network
- Look for the
statalog.com/collectrequest (or refresh the page to see it)
Done. Live on your published site in seconds.
Webflow Notes
- All pages are tracked automatically. Custom code applies to your entire site.
- CMS data: If you're using Webflow CMS, the tracker works on CMS collection pages too (blog posts, case studies, etc.).
- Hosting: Webflow hosts your site, so there's no deployment step—your code is live as soon as you save.
- SPA tracking: If you use Webflow's client-side routing, you might need to enable
hashMode: truein your config to track single-page navigation. Test this if you notice page transitions not being tracked.
Framer
Framer is a React-based builder designed for interactive prototypes and marketing sites. The analytics setup is equally straightforward.
Step 1: Get Your Tracking Code
Copy the script from Statalog → Settings → Install Code.
Step 2: Add Code to Framer
- Open your Framer project
- Click Settings (gear icon, top right)
- Scroll to Custom Code
- Paste your script in the Head Code section:
<script defer src="https://cdn.statalog.com/tracker.min.js"></script>
<script>
window.statalogConfig = {
siteId: 'your_site_id_here',
hashMode: false
};
</script>
- Click Done
Step 3: Test in Preview
- Click Share → Get Link and open the preview link
- Right-click → Inspect → Network
- Look for the
/collectrequest
You'll see data flowing in immediately.
Framer Notes
- Real-time updates: Framer publishes instantly. No build step, no deployment wait.
- Interactions tracked: If visitors interact with Framer components (hover, click, scroll), those are all still tracked as regular pageviews.
- SPA by default: Framer sites are single-page applications. The tracker handles this automatically with standard settings.
- Staging vs. production: If you're working on a draft version, analytics are only collected on your published site (the one with a real domain).
Ghost
Ghost is a membership and publishing platform optimized for writers and creators. Analytics setup requires one extra step because Ghost uses a different custom code location.
Step 1: Get Your Tracking Code
Copy the script from Statalog → Settings → Install Code.
Step 2: Add Code to Ghost
- Go to Ghost admin → Settings (gear icon)
- Click Code injection (in the left sidebar)
- Under Header (not Footer), paste your script:
<script defer src="https://cdn.statalog.com/tracker.min.js"></script>
<script>
window.statalogConfig = {
siteId: 'your_site_id_here',
hashMode: false
};
</script>
- Click Save
That's it. Your Ghost publication is now sending analytics.
Step 3: Verify It's Working
- Open your Ghost site in an incognito window (or a different browser)
- Right-click → Inspect → Network
- Reload the page
- Look for the
statalog.com/collectrequest
Ghost Notes
- Member-only content: The tracker works on all pages, including members-only posts. You can see how many members visit each piece of content.
- Newsletter subscribers: Ghost tracks newsletter opens natively. The page tracker doesn't see newsletter opens, only page views on your site.
- Donations/Memberships: If you use Ghost memberships or Stripe integration, you can send conversion goals to track paid conversions.
- Subdomains: If you host Ghost on a subdomain (e.g.,
blog.yoursite.com), analytics still work fine.
Framework-Agnostic Landing Pages
If you're using Webflow, Framer, or similar platforms to build a landing page for a campaign (separate from your main site), you can track analytics on that landing page independently.
Just use a different Statalog site ID for each landing page or domain:
- Create a new site in Statalog for your campaign
- Copy the new site's tracking code
- Paste it into your landing page project
- Now analytics for that campaign are separate from your main site
This way you can see exactly how many visitors came to your campaign landing page, what they clicked, and whether they converted—without that traffic mixing with your main site's analytics.
Verifying Installation on Each Platform
Here's the universal test for any platform:
- Open your site in an incognito/private window (so you're not logged in)
- Right-click → Inspect
- Go to the Network tab
- Reload the page
- Look for a POST request to
statalog.com/collect(or your custom tracking domain) - Click that request and view the Preview tab to see the data:
{
"name": "pageview",
"url": "https://yoursite.com",
"referrer": "",
"viewport_width": 1920,
"session_id": "abc123xyz"
}
If you see that request and data, you're good. If not, double-check:
- Is the script in the
<head>(not body)? - Is your site ID correct?
- Are you viewing the published site (not a preview or draft)?
Performance on Each Platform
All four platforms are CDN-backed and serve static/pre-built sites, so performance impact is minimal:
| Platform | Script Load | Impact | Notes |
|---|---|---|---|
| Shopify | Async (deferred) | < 1ms | E-commerce optimized, minimal overhead |
| Webflow | Async (deferred) | < 1ms | Fast CDN delivery |
| Framer | Async (deferred) | < 1ms | React-based, script loads after hydration |
| Ghost | Async (deferred) | < 1ms | Lightweight publishing platform |
All platforms load the script asynchronously, so it never blocks page rendering.
Common Issues & Fixes
Issue: No Data Showing in Statalog Dashboard
Check:
- Is the script in the
<head>tag (not after</body>)? - Is your site ID correct?
- Have you published the changes (not just saved a draft)?
- Wait 2-5 minutes—data takes a moment to show up
Fix: Reload your published site in an incognito window, check the Network tab for the /collect request. If it's there, data is flowing. If not, re-paste the script and save again.
Issue: Content Security Policy (CSP) Blocking Tracker
Some platforms enforce strict CSP headers. If you see a CSP error in the browser console:
Refused to load the script 'https://cdn.statalog.com/tracker.min.js'...
You may need to contact your platform support to add cdn.statalog.com to your CSP whitelist. Most no-code platforms allow this in settings.
Issue: AMP Pages Not Tracking
If your platform serves AMP (Accelerated Mobile Pages), the standard script tag doesn't work. Contact Statalog support for the AMP-compatible tracker code.
Issue: Staging vs. Production
If you have a staging version of your site (e.g., staging.mysite.com), it might use the same tracking code as production. This means staging traffic gets mixed with real traffic.
Solution: Create a separate Statalog site for staging with a different site ID, so you can keep staging and production analytics separate.
Comparison Table
| Platform | Difficulty | Setup Time | Analytics Page | Custom Domain |
|---|---|---|---|---|
| Shopify | Easy | 3 min | theme.liquid | Yes |
| Webflow | Very Easy | 2 min | Settings → Custom Code | Yes |
| Framer | Very Easy | 2 min | Settings → Custom Code | Yes |
| Ghost | Very Easy | 2 min | Settings → Code Injection | Yes |
All platforms support custom domains and SSL, so you're secure out of the box.
FAQ
Q: Does this work on free plans?
A: Yes. All four platforms allow custom code on free and paid plans. Your analytics will work whether you're on Shopify Basic or Shopify Plus, Webflow free or pro.
Q: Can I track payment/checkout information?
A: No. For security reasons, the tracker never sends payment card data or password data. But you can track that a purchase happened (conversion goal) without capturing the payment method.
Q: What if my platform loads the page dynamically (single-page app)?
A: The tracker handles SPA page transitions automatically. If you notice pages aren't tracked (especially when using client-side routing), let me know and I can adjust the hashMode setting in your config.
Q: Can I track user behavior across multiple domains?
A: Not by default. Each domain gets its own site ID in Statalog. If you want to track behavior across mysite.com and landing.mysite.com, use separate site IDs for now (you'll see them as separate sites in your dashboard). This will be unified in a future release.
Q: Will this conflict with Shopify's native analytics?
A: No. Shopify analytics and Statalog analytics run independently. Both are fine to use together. Shopify analytics are simpler and built-in; Statalog gives you deeper insight into funnels, sources, and user paths.
Q: Can I track form submissions or clicks?
A: Yes. You can add a conversion goal (like "contact form submitted" or "download clicked"). The tracker records these as goals in your dashboard.
Next Steps
- Install the tracker on your platform using the steps above
- Set up conversion goals (e.g., "Contact Form Submitted", "Product Purchased")
- Create funnels if you have a multi-step process (Landing Page → Product Page → Checkout)
- Check your dashboard in 30 minutes to see data flowing in
Your no-code site is now fully instrumented. No plugin maintenance, no third-party dependencies, just clean analytics that work everywhere.
Need help? View installation docs or contact support.
Previous article
How to Add Analytics to a Next.js App (Without Hurting Performance)