How to set up Wix analytics, heatmaps, and more

Jun 20, 2024

Posted by

On this page

To create the best possible Wix site, you need to know how users interact your site. PostHog provides tools like analytics, heatmaps, and session replays to help you do this. Best of all, PostHog has a generous always free tier (unlike other Wix analytics tools)

This tutorial shows you how to set up PostHog to your Wix site to capture analytics for you to analyze as well as how to set up and view heatmaps.

Note: Adding custom code, which we do in this tutorial, requires Wix's premium plan.

How to add PostHog to your Wix site

After signing up for PostHog (which you can do for free), go to your project settings and copy your web snippet which looks like this:

HTML
<script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('<ph_project_api_key>',
        {
            api_host:'https://us.i.posthog.com', 
            person_profiles: 'identified_only'
        }
    )
</script>

With this, go to your Wix settings, scroll down and choose Custom code, click the + for the header, paste in your web snippet, and click Apply.

Wix code

Now, when you (or your users) go to your site, PostHog will autocapture pageviews, button clicks, form inputs, and more. If you have session replay enabled, these are captured as well.

Analytics

How to set up and view heatmaps

PostHog's heatmaps enable you to see where users are clicking on, hovering over, and scrolling. The web snippet you set up autocaptures the data needed for this, but it needs to be enabled in your project settings.

Once enabled, you can access it via the toolbar. To launch the toolbar, go to the toolbar tab in PostHog, add your URL as an authorized domain, and click Launch.

Toolbar

This brings you to your site with the toolbar active. From here, you can click between the toolbar options to view the heatmap, clickmap, and scrollmap overlaid on your Wix site.

Clickmap

Further reading

Subscribe to our newsletter

Product for Engineers

Join 25k+ subscribers learning how to build successful products and become better engineers.

We'll share your email with Substack

Comments