The latest from the PostHog community

How to set up Webflow analytics and session recordings

Jan 12, 2023

Posted by

On this page

Webflow is one of the most popular no-code site builders. It makes building high-quality marketing sites, blogs, landing pages, and ecommerce stores a breeze.

To ensure your Webflow site is as good as possible, you need data about its usage. PostHog provides tools to capture and analyze this data. This tutorial goes over how to add PostHog to your Webflow site to capture pageviews, events like button clicks, session recordings, and more.

It requires both a PostHog and Webflow account, along with a Webflow paid site plan (PostHog is free up to 1M events and 5k session recordings per month).

Create a Webflow site

First, you need a Webflow site to add PostHog to. Sign up at webflow.com, go through the tutorial, and create a new site. There are pre-made templates available to make this process easy, such as the one we used for this tutorial. Once you're happy with the site you've made, publish it.

You should get a .webflow.io URL we can test with. Once you published your site, go to the top right menu and open the Project Settings page.

Webflow publishing

Adding PostHog to your Webflow site

In PostHog, get the JavaScript snippet from the Getting Started page or in your Project settings. It 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.async=!0,p.src=s.api_host+"/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 getNextSurveyStep".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>

Copy the snippet and go back to Webflow. In the Webflow “Project Settings” page, go to the “Custom Code” tab. If you haven’t already, add a site plan to enable custom code. Once active, just paste the PostHog snippet in and save the changes.

PostHog snippet

Once you’ve done that, publish the site again, go to the published site, refresh, and click around (to capture some events). After a minute, events appear in PostHog.

PostHog events

From here, you can analyze data from your Webflow site with our suite of product analytics tools like trends, funnels, and recordings. It also enables you to combine your website data with your product data leading to better insights about the full journey.

Note: You must enable session recordings for to capture them on your Webflow site. To do this, go to Project settings in PostHog, scroll down to Recordings, and toggle on “Record user sessions.”

Further reading

  • Dmitry    4 months ago

    Is there a way to preserve the replay session after the user is redirected from example.com to app.example.com? Our current implementation simply stops one session and starts a new one. Please advise!

  • Ve    a year ago

    This is awesome! We revamped our landing page where we are using a webflow site now instead of a next.JS app.

    So I have 2 questions:

    1. A lot of the events that are coming are a lot more generic now i.e "clicked div" rather than specific events such as "clicked Get Started CTA". In light that we're using the client side web script now, how can we have more specific events show up?

    2. The second question is that most of our event tracking was on the server side meaning that our data was incredibly reliable and always captured data but now with this client side script we're running into similar issues as we did with GTM/GA where some times the user, or user's browser will block tracking. Is there a preferred way to implement a server side version or another way to improve fidelity of capturing data, most importantly, events across the landing page?

    Thanks so much!

    • Ian      a year agoSolution

      Howdy,

      First, there are two ways to get more specific events:

      1. You can still write JavaScript event handlers for components in Webflow, these can trigger custom events. Kind of like how we do in this tutorial.
      2. You can use the toolbar and create an action for the components which can then be used throughout PostHog.

      Second, you can use a reverse proxy to avoid tracking blockers. With Webflow, it is likely best to use something like Cloudflare, AWS, or Caddy.

    • Ve      Authora year ago

      This is absolutely fantastic! Thanks for getting back to us so quickly. We're going to give this a go but based on what you outlined, this makes sense! image.png

  • Kacper    a year ago

    Hey team. We have an issue on our webflow site where all user data comes from America even tho we operate worldwide and when our team is testing recordings it's fro US (team is based in Poland)

    How can we solve this issue?

    • Ian      a year agoSolution

      If you can access it, you can send the IP address as an event property which the GeoIP app then transforms.

  • Chase    2 years ago

    Should my marketing site and app use the same project?

    One of the things I'm most curious about is whether my marketing site analytics should also live in the same project as my app.

    Should they both be sending events and users to the same project or have separate projects?