posthog/posthog.com

Official docs, website, and handbook for PostHog.

PostHog.com - Website, docs, blog, and handbook

Support - Roadmap - Open an issue - Style guide

This is the repository for the PostHog website. It contains:

• All of our written content and visuals including product features, manuals, docs, blogs, case studies, tutorials, and the handbook
• Features like questions and answers (using Squeak!), job listings (using Ashby), pricing calculator, roadmap, API docs, and more
• All the components, templates, logic, and styling to make this work, look pretty, and spark joy

Table of contents

• Quick start
• Advanced setup
• Contributing

Quick start

1. Pre-installation

   Install Node and Yarn. (If you're on a Mac with Apple Silicon and get an error with -86 in it, you may need to install Rosetta.)

   npm install --global yarn

2. Start developing

   Clone the repo then navigate into your new site’s directory, install the site dependencies, and start it up.

   cd posthog.com/
   yarn
   yarn start

   Tip: Seeing a discrepancy between local development and staging/production? Preview the production build locally by running gatsby build && gatsby serve

3. Open the source code and start editing!

   Your site is now running at http://localhost:8001!

   Note: You'll also see a second link: http://localhost:8001/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

See full instructions on developing PostHog.com locally in our manual.

Advanced setup

Docker

It is also possible to use Docker to run posthog.com locally with this command:

docker run -it --rm \
    -w /app -v "$PWD":/app \
    -p 8000-8001:8000-8001 \
    -e INTERNAL_STATUS_PORT=8001 \
    node:14-slim \
    sh -c 'yarn && yarn start'

Debugging errors on start

1. Pull the latest changes from master
2. Run gatsby clean && yarn start or delete node_modules and .cache
3. Check builds are passing in deployment to Vercel

Working on /docs/api?

The site will load the API schema from US Cloud by default. You can override this to use your local PostHog instance with an env var:

POSTHOG_OPEN_API_SPEC_URL="http://127.0.0.1:8000/api/schema/" yarn start

Want Ashby job listings or GitHub contributors to load?

You’ll need to set environment variables for these. See (private) instructions for this.

Developing the posts section

To see your local version of the posts section, /posts needs to be visited directly (http://localhost:8001/posts)

Developing the merch store

Additional environment variables are needed to develop the merch store:

• SHOPIFY_APP_PASSWORD
• GATSBY_MYSHOPIFY_URL
• GATSBY_SHOPIFY_STOREFRONT_TOKEN

Currently, these environment variables are excluded from Vercel preview builds to disable merch store node creation and speed up build times on non-merch related PRs.

Contributing

We <3 contributions big and small. In priority order (although everything is appreciated) with the most helpful first:

• Ask a question in our community
• Submit bug reports and give us feedback in the app!
• Vote on features or get early access to beta functionality in our roadmap
• Open a PR
  • Read our instructions above on developing PostHog.com locally
  • Read more detailed instructions in our manual
  • For basic edits, go to the file in GitHub and click the edit button (pencil icon)
• Open an issue or content idea

posthog.com's Issues

Changelog direct links need updating

when we move the website, the changelog needs to be updated

Header links need ant design style on hover

The header links should have the same CSS as the header links at https://ant.design/ - ie blue w/ line on hover / active

Change logo images in product when DNS switched to new site

The app has images that need replacing

• Icon file in header is hotlinked to an image at posthog.com that will break
• Logo above left sidebar needs replacing

Create specific links to equipment to help standardize this better

Laptop choice can be fairly standardized within certain roles. Add specific links to examples within the spending money policy.

Standup 14th May 2020

James I

• Done: DNS migrated
• Done: money transferred to US account, should arrive today to allow email to do 409A
• Done: instructions for onboarding new people in handbook
• Done: customer call yesterday
• Done: The Array is just about ready to go out, need to finalise the image links
• Todo: designer recruitment
• Todo: investor update
• Todo: content marketing, but lower priority than designer

Marius

• Done: dashboard moving around stuff
• Done: a few small bugs and PRs
• Todo: issue with iOS app to solve
• Todo: finish dashboards on mobiles
• Todo: change default homepage

Tim

• Done: filter by person properties
• Done: reviewing other PRs
• Todo: tickets!

Eric

• Done: clean up on some tickets - bugs / ant design
• Todo: fix PRs that are open
• Todo: missing text issue
• Todo: paths query
• Todo: trying to work out how to improve the testing framework

James II

• Done: debugging funnel performance - installed Django debug toolbar. Went from 14s to milliseconds :)
• Done: need to parameterize the above

Migrate domain DNS

🎉 the new website v1 is ready to launch.

Blocking items

• copy the folder structure of all contents inside wp-content/uploads/ so the (i) icon (ii) changelog don't break

Tidying up

• there is a hotlinked icon file in the header of the app that should be replaced with a local link in the app as a PR
• replace links in the app to the docs (this will be fine in short run if it is all redirected properly)
• submit a PR to fix any links to old docs in the product
• add redirects from each URL of the old docs to the new docs so any links from the product don't break (this cannot be done in advance since it is hosted on GitHub pages so requires this approach

External links in top menu don't work when it appears as the dropdown

External links in menuItems.json needs to be parsed in the dropdown responsive menu

Create a contact page

We should have a page that has our contact details and a form on it to capture messages from prospective users / customers

Tweak docs

1. Create logos for the installation, that you can click to go to the relevant deployment page:

• Docker
• Kubernetes
• Heroku
• Source

2. Work out how to clarify the various SSL / https type issues that users have had. Troubleshooting guide?

Hide overflow on the right of the main page content

Remove the white space to the right of all the page content

Making 'Getting Started' much clearer

The menu structure in the docs needs to be thought through better, especially for people trying to deploy for the first time

Create policy on offboarding

Being upfront over how we will tackle these situations would be healthier than having to create plans ad hoc in potentially stressful situations:

• Voluntary offboarding
• Involuntary offboarding - business need changes
• Involuntary offboarding - performance
• Involuntary offboarding - other

Standup 18.05.20

Last week

• Funnel stuff was pretty cool - good improvement in testing
• Event partioning done :)
• Integration tests working
• Build time is quite slow (Docker image), making some tasks a bit annoying. Can't do much here since caching the image is a roadmap item for GitHub actions
• Really delighted with quality of dashboards
• We will prioritize startup targeting over content marketing for 2 weeks, since this feels it is more likely to achieve the outcome we want and not that much work

Tim

• Todo: Get Review in progress items merged
• Todo: structure all the ideas for the toolbar into a roadmap for phase 2

Eric

• Done: event partioning
• Todo: paths
• Todo: integration tests

Marius

• Done: bug fixes with iOS integration
• Done: routing issue fixed
• Todo: implement last feedback for dashboards so it's in the next release

James II

• Todo: address feedback on funnel new logic
• Todo: cumulative graphs

James

• Done: thoughts on localhost toolbar added to the issue (and thanks everyone else also!)
• Done: issue created re telemetry
• Done: intro to 409a people received, need to follow up with them
• Done: strong designer interview lined up as first preference
• Done: we have an official US postal address
• Todo: double check if anything left re US Payroll for Eric
• Todo: work through UK payroll
• Todo: create posthog.com/startups page
• Todo: get the YC deal live, and get the deal out with other startup accelerators

Document how deployment of posthog.com works

create contributing.md for posthog.com

Add policy on coworking / café working

Set up swag system for contributors!

Gatsby and GitLab both do great jobs of this!

How to use across multiple domains

Add a walk through for how to track a user across multiple domains.

All code blocks start with a space

I'm not sure why, but every multiline block of code looks off, as every code block has one space in front of it. Singleline blocks look fine, though they also have that space.

Images for changelog have to be copied twice

We have quite a confusing image structure on the website.

The best way to post images is into /static/ExamplePath/ExampleImage.png as this then publishes the image at posthog.com/ExamplePath/Example.png, so can be hotlinked from the changelog.

There is a plugin that generates the images from the /contents folder, that needs to look inside the /static folder instead.

Build failing

Getting this error from Amplify causing build to fail:

 [WARNING]: error "window" is not available during server side rendering.

Solution: gatsbyjs/gatsby#309

Deployment page images should have shadow

The deployment page images should have the same CSS on hover as the images on the homepage

Header row is too large, obscuring some links

The header row is too large, which means you can't click the top links in the sidebar nav

Standup 21.05.20

Tim

• Done: lots of calls after the YC deal
• Done: telemetry PR
• Todo: add descriptions for event labels

Eric

• Done: added more tests
• Done: created high fidelity mockup for toolbar
• Todo: timeframe comparison

James G

• Done: getting head around events actions (ie 19 query challenge)
• Todo: diagram it to work out a solution for event loading

James H

• Done: release notes for Array
• Done: emailed the Array
• Done: lots of demand for the YC deal as a test of the startup program
• Todo: get the /startup deal live, and probably get swamped with call booking and hustling :)

Add Microsoft Teams to docs

since it works for this!

Footer links aren't responsive

• Open any page
• Make the screen more narrow - the footer elements should slide under each other

Fix markdown image loading

Add nice syntax colors

Ant Design can provide nice syntax highlighting colors, we should add this to our docs

Add an alternate image to the homepage for product functionality

Community integration walk throughs

We currently have integrations with lots of languages and frameworks.

However, it'd be nice to make these more accessible for developers.

An easy way of doing this would be to have walk throughs for how to integrate PostHog into:

• Wordpress
• Next JS
• Drupal
• React
• Ember
• Angular
• Svelte

Similar to how giving walkthroughs for deployments to various cloud providers would make life much simpler for new people to PostHog.

Logo tidy up

When the new logo is designed, this should be rolled out to all our web properties:

• Product
• PostHog Readme header
• PostHog GitHub
• Twitter - company
• Twitter - personal
• LinkedIn - company
• LinkedIn - personal
• Facebook
• YouTube
• Instagram

Standup 15.05.20

Reminder

Please give feedback on #741 ideally by early Monday :)

Tim

• Done: filter by person properties
• Done: ad is set, is true, is false
• Todo: help the user issue with volume

James

• Done: Array sent out
• Done: investor update 1 sent out
• Done: address verification completed. Need some info from Eric to continue with Payroll
• Done: 1password setup for people with @posthog.com emails. Please move all your stuff into this.
• Done: started a private recruitment repo.
• Todo: outreach to designers. Probably will be contractor for website+docs, then a UX person for product in future as a full time hire.
• Todo: stuff from the posthog.com feedback ticket that I can do easily

Eric

• Done: learning how GitHub actions (docker compose into the actions workflow to run tests against it). It's working but issue with docker container shutting down.
• Todo: test and set up if appropriate cypress.io

Marius

• Done: dashboard PR done
• Todo: look at some PRs and clean up some stuff

James II

• Done: dug into funnel more - query in django ORM. We've gone from >1 min to ~10 sec for 20K users
• Todo: keep digging into the display part of the funnel (the query is quick, but it takes a while to display)
• Todo: start working in the PostHog repo as a branch not in a forked repo so it's easier to collaborate

Improve homepage

Homepage feedback to work through

• Video of walk through with loom
• CTA's not outlined
• No CTA at the end
• Don't understand difference between install and free trial
• Want to be able to click on it and see more detail
• Change logo in screenshot
• Need people/faces (spendesk.com)
• Difference between h2/h3 "open source" vs "self hosted"
• "Designed for your stack" more margin on mobile
• Apple logo is pixelated
• Android is too small
• Greyed out logos
• Support: "PostHog can manage" -> "We can manage" b/c it's the company not product
• "Install now, it's free"
• AWS logo is cut
• "Handbook" logo is weird under community
• Testimonials (although that will require some time!)

General:

• More screenshots -> video -> more text -> several pictures. (we should create pages that explain the product better with graphics.
• Has to be more relatable/fun
• Add pages for solutions for each subgroup
• Features

Pricing

• Make own offer more obvious in comparison table
• Add FAQ for pricing specifically
• Add links for each of the features
• "Multi-site" vs "multi user

# Feedback I'm not sure I understand/agree with;

"PostHog for Enterprise"
Confusing this is on home page. Maybe should be "enterprise-grade, built for developers"

Deprecate docs.posthog.com

Sorry if this has been posted before, but https://docs.posthog.com/ still exists and contains the old docs. These should redirect to the new site.

Create an install page

We need a page that has the full range of options for how to install the software.

For example, a list of logos - everything from AWS through to Heroku or Hosted.

You should be able to click the logo you want, and get taken to either docs or Heroku or whatever is appropriate for that method of deployment.

Add search to docs

Write docs on how to migrate from mixpanel/amplitude

• Could add a 'compatibility mode' for frontend so you don't have to replace any of the .track calls
• Guide on how to migrate data over if possible

Lots of non-retina logos on home page

• Python
• PHP is old logo
• Node
• AWS
• Slack (Text is not clickable)
• Github (also not clickable)
• Roadmap (text not clickable)

Improve pricing page

• Add info for the hosted charging cost
• Make clear that we provide paid support for enterprise customers

There's no point adding pricing for the paid version since that will pull engineering resource into the paid product, moving our engineering focus way from adoption.

Sidebar Extent

Make the sidebar responsive. On the docs page, if you open many of the submenus on the sidebar, the sidebar will extend very far past the footer. The sidebar might also look better if aligned up against the header so it's not floating in the middle of the page

Fix external links in top header

Only <Link to...> is supported, but that doesn't work for external links.

WIP: How to: Raising money for open source

This could go into the marketing for engineers - if we made it broader "how to build a huge company from your app":

• What is a good ideas
• Funding
• Product led growth
• etc

We've put a ton of work into raising money lately and have learned a lot, particularly about the nuance of doing it for open source.

Could do something like 'How to raise VC funding for your open source project' as a subset of 'Funding'

Add page titles + metadata to every internal page

We have h1 tags, but we need to create <title>whatever is in h1</title> on every page for SEO reasons.

We also need social media previews etc to work properly!

https://www.gatsbyjs.org/docs/add-seo-component/ looks like the right way to do this

Sidebar on /handbook needs tidying

Add PostHog tracking!

NB there is a gatsby plugin for PostHog detailed in our old docs

Manually move all the blog content over

This stuff has to be done by copy pasting it all and fixing all the external links / images

Standup 19.05.20

James H

• Done: final US payroll clarification question with accountant
• Done: UK payroll questions sent to account
• Done: returned design briefing
• Todo: midway through /startups landing page, need to complete
• Todo: put together the Array and update docs at the same time

Tim

• Done: helping high scale customer solve bugs with redis (duplicated their entire setup)
• Done: has taken work from feedback into a sketch
• Todo: more work on the bugs above
• Todo: boolean/nested filtering

Eric

• Done: paths by event merged in
• Done: integration test completed, but a few more configurations needed to cover
• Todo: scope and write more Cypress tests for critical paths
• Todo: kill some bugs on the issues list
• Todo: complete the move to AntD and remove bootstrap stuff
• Todo: if time, work on a higher fidelity test for phase 2

Marius

• Done: pushed dashboard PR to master :)
• Done: bug fix with iOS library
• Todo: React Native library - need to be able to see ie React Native iOS
• Todo: issue with GitLab (wait until Wednesday with new Docker Image) merge

James G

• Done: set up a company!
• Todo: communal graphs
• Todo: chat with Tim re what to focus on

Add a form for the sales contact page

It's weird that we ask people to email us.

Broken links under API docs

These two links here: https://posthog.com/docs/integrations/api#reading-data-from-posthog

... lead to 404 pages. The href for them is https://app.posthog.com/redoc/

WIP Produce useful content, specific to what we can help people with.

We need to work out how to grow our users.

We have seen good success so far from producing content that is useful.

• Launching the repo on HN: went well, as many people saw value in using it for their products
• Launching the YC blog posts: this was meant for people that are thinking of applying to YC right now

There are many developers out there who can build amazing software but don't know how to get users beyond a few posts.

We believe it would be a good idea to produce a series of posts that explain how to do marketing for engineers.

• Useful for hobbyist engineers with no marketing experience
• Useful for engineers in larger orgs to get a better understanding of how to help the company grow

I believe that product led growth is a trend that will come into the broader market, yet it is badly understood by both engineering and marketing teams - we want to help especially companies without an incredibly strong product presence.

For example, engineers building an app for a huge bank should be using the same tactics that engineers at Facebook or Dropbox would employ. That's what I think we should write about.

Product Led Growth - plan

Posts (WIP)

• Why product led growth is a good strategy

  • B2B
    • Zoom
    • Slack
    • Airtable
    • Figma
    • Twilio
    • Expensify
    • Atlassian
    • InVision
    • Zapier
    • Hootsuite
    • Buffer
  • B2C
    • Pinterest
    • Typeform
    • Warby Parker

• How to validate your product market fit

  • Finding people to talk to
  • User interviews

• Product Led Growth Flywheel

  • Evaluators (focus on activation)
  • Beginners (focus on adoption)
  • Regulars (fous on engagement)
  • Champions (-> Evaluators) (focus on advocacy)

• Activation

  • Finding users (todo: add 12 key channels)
    • Online marketing
    • Email marketing
    • PR
    • Content marketing
    • SEO
    • Sales
    • Events
  • FEATURE: User properties
  • FEATURE: User paths
  • FEATURE: Funnels
  • Pricing
  • Selling

• Adore

• Adoption

  • Building a product
  • FEATURE: Trends

• How to upsell and renew

## Tone

Every time we've produced content before, we've found this important.

We want to be approachable, friendly and fun.

We will try to make this