How we installed PostHog on WordPress

Introduction

In this blog we share our experience in conversion rate optimization and everything that we faced along the way. PostHog, being our main tool in CRO, has a big effect on it, thus we talk about it a lot. We have installed PostHog on many tech stacks, WordPress being one of the most popular of them. 

In this guide we will walk you through our experience in setting up PostHog on a WordPress site with any page builder—quickly and easily. 

But before you begin, make sure you have these prerequisites met:

• Create your Posthog account, organization, & project
• Install a code manager plugin on WordPress (you can choose your best fit here.)

Step 1: Grab PostHog Snippet

Similar to step 1 in Installing PostHog on Shopify, start by grabbing your PostHog snippet from your project’s settings:

1. Log in to your PostHog account.
2. Navigate to Project Settings.
3. Find the Web snippet section and copy the HTML snippet provided.

I also needed to change the “identified_only” to “always” for complete coverage of anonymous users. My final code looked like this:

<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.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="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".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('******************************************',{api_host:'https://us.i.posthog.com', person_profiles: 'always'
        })
</script>

Step 2: Add PostHog Snippet to My Website

I used the HFCM plugin for injecting my code into the website without worrying about losing it after a theme update or any change that might happen to my website. But you essentially can use anything as long as the snippet is available on the website.

I created a new snippet, pasted the snippet in it, made sure it applied to all pages of my site. And that’s all!

Step 3: Verify Installation

To verify your installation, visit the website, then head to the Activity section in your Posthog dashboard. You should be able to see the events (including your pageview) present there.

Step 4: Enhance Your Analytics (Optional)

Down the road we enhanced our analytics insights by adding these useful transformations from PostHog:

User Agent Populator: Enhances events with user agent details, offering valuable information about your users’ browsers and devices.
URL Normalizer: Tidies up URL formats, making it easier to compare insights and providing a cleaner view of your data.
URL Parameters to Event Properties: Converts URL query parameters to event properties, allowing you to track specific campaign parameters and traffic sources more accurately.

Conclusion

By following these steps, you can integrate PostHog with your Shopify store to gain deeper insights into customer behavior and improve your conversion rates. Happy analyzing!

Need further assistance? Feel free to leave a comment below or reach out to us for more help.