← Back to blog

How to Install Analytics on Shopify, Webflow, Framer & Ghost

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

  1. Log in to Statalog
  2. Click Settings → Install Code
  3. 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

  1. Go to Shopify admin → Sales channels → Online Store → Themes
  2. Find your active theme and click Edit code (or the <> icon)
  3. On the left sidebar, open theme.liquid (the main layout file)
  4. Scroll to the closing </head> tag near the top (around line 50-100, depending on your theme)
  5. 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>
  1. Click Save (top right)
  2. 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:

  1. Open your store URL (e.g., mystore.myshopify.com)
  2. Right-click → Inspect → Network tab
  3. Reload the page
  4. Look for a request to statalog.com/collect or your custom domain
  5. 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

  1. Go to your Webflow project dashboard
  2. Click Settings (gear icon, bottom left)
  3. Scroll to Custom Code
  4. 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>
  1. Click Save

Step 3: Verify in Real-time

Webflow gives you a live preview:

  1. Click Preview (top right, the eye icon)
  2. Your site opens in a new tab
  3. Right-click → Inspect → Network
  4. Look for the statalog.com/collect request (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: true in 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

  1. Open your Framer project
  2. Click Settings (gear icon, top right)
  3. Scroll to Custom Code
  4. 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>
  1. Click Done

Step 3: Test in Preview

  1. Click Share → Get Link and open the preview link
  2. Right-click → Inspect → Network
  3. Look for the /collect request

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

  1. Go to Ghost admin → Settings (gear icon)
  2. Click Code injection (in the left sidebar)
  3. 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>
  1. Click Save

That's it. Your Ghost publication is now sending analytics.

Step 3: Verify It's Working

  1. Open your Ghost site in an incognito window (or a different browser)
  2. Right-click → Inspect → Network
  3. Reload the page
  4. Look for the statalog.com/collect request

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:

  1. Create a new site in Statalog for your campaign
  2. Copy the new site's tracking code
  3. Paste it into your landing page project
  4. 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:

  1. Open your site in an incognito/private window (so you're not logged in)
  2. Right-click → Inspect
  3. Go to the Network tab
  4. Reload the page
  5. Look for a POST request to statalog.com/collect (or your custom tracking domain)
  6. 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:

  1. Is the script in the <head> tag (not after </body>)?
  2. Is your site ID correct?
  3. Have you published the changes (not just saved a draft)?
  4. 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

  1. Install the tracker on your platform using the steps above
  2. Set up conversion goals (e.g., "Contact Form Submitted", "Product Purchased")
  3. Create funnels if you have a multi-step process (Landing Page → Product Page → Checkout)
  4. 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.