App functionality

• Add alias functionality

Website

• Obvious divide between hosted PostHog.com and self-hosted
• Self-serve sign up to PostHog.com (really just a link to /signup)
• (maybe?) At least 10 self-serve customers so we know flow is working (Ellie / Ian)
• FAQ with every objection HN commenters gave to other self-hosted stuff (Mattermost, Piwick)

License

• Finalize license choice (BSL / Open core / Other)
• Documentation on how to contribute to the project

Libraries

• Open source our tracking library, ideally with references to mixpanel removed (except license)
  • (maybe?) work out a way of tracking without cookies so we don't have to comply with donottrack etc
  • #20 Trim down/rationalise information sent from browser enhancement
• (maybe?) Python library
• (maybe?) Ruby library

Self deployment

• At least one self-hosted user
• (maybe?) Some way of doing updates easily as there will be a ton of feature building
• Docker package
• Make secret-key an environment variable
• Documentation on how to self-host
• (maybe?) Some way of restricting sign-ups to email/something else
• (maybe?) deploy to heroku button
• Create screen to create super user first time a user logs in

When logged in as [email protected], and navigated to app.posthog.com/people, it seems there is some issue:

It also appears their funnel statistics aren't updating - go here: https://app.posthog.com/funnel/1 - you'll see just 1 user dropped out. Go through the website yourself, then see if it updates. Could that be due to the two domains / 1 login set up for them? Or is it part of the issue above.

• We sometimes have $pathname, sometimes $current_url.
• ph_page_view sends different information than $web_event -- make sure it's consistent
• Rename ph_page_view and $web_event to something more indicative
  • Don't forget to rename them in editor/index.js
• Check every bit of information to check whether we really need it
• Make sure we're NOT double storing stuff in properties and as a field

Initial product design

This is not split into MVP versus regular product. It's a list of common requirements we'll face in the first few months, and was based on going through our own implementation of Mixpanel.

Terminology

"Action" - this is an important Event. This should be a user taking a postive action, like a form submit, creating a Facebook post, giving feedback in Hiberly.

Who is using my app a lot?

• I need to be able to see a list of users next to how many actions they have taken.
• I need to be able to see these actions categorised - the total volume isn't relevant. I need to be able to see:
  • I need to be able to categorise some Event types into Actions, ie "gave feedback", "page visits" or "created retrospective" in Hiberly, and to see the action volumes within each of these action categories by user. (I wonder if we could do quite a lot of this automatically).
  • I want to be able to see if a user's activity has been recent.
  • I want to know why certain users with high volume of usage are using it so much.
    *This means knowing as much as possible about who they are and where they came from, and all the data they have given if they have made a user profile.

## Who has used my app recently?

• I need to be able to see a list of Actions in order of recency, with the User visible.

Is my app getting more popular or are people quitting?

• I need to be able to see the Actions over time.
  • For example, I need to be able to see Daily Active / Monthly Active users

Are people coming back to my app? Do they like it?

• I need to be able to visualise Actions over time.
• I need to be able to segment the above by User, so I can work out which users are coming back.
• I need to be able to see a standard retention table for event -> event (Heap and Mixpanel both look almost identical here):

Someone took a very important action, like signed up or started paying us, how come?

• I need to be able to see for everyone that lands on the website, which pages they follow and which actions they take.
  • If they exited and did not convert, I need to be able to see this journey too (it's going to be most people!)
  • I need to easily be able to segment by the kind of person this is. For example to see the journey for Users, or the journey for Paying Users. We need to be able to create audience segments to do this.
• I need to capture any other url parameters automatically.
  • I will usually use UTM tags for this information.

Where am I losing people in the signup flow?

• I need to be able to list out the key actions to achieve the goal I have (ie a paying customer or a signup)
• I need to be able to visualise the percentage drop off at each of these stages.
• I need to be able to see the trend in this graph over time to see if optimisations
  • I would love to be able to map experiments or pull requests to this graph so I don't have to dig through other tools to work out what changed.

Which parts of my online marketing are the most effective? NOT IN MVP

• I need to see the ROI of my marketing spend.
  • I need to be able to segment this by flexible combinations of UTM tags.

There are a two reasons why funnels are frustrating to make as a user:

• I can't reorder steps
• I can't delete steps

Since the funnel automatically saves, it makes it very easy currently to create crap in there by accident because of this.

At the moment it's only broken down by day.

Should be a fairly simple change as the API supports this with some small tweaks.

What

Just be able to filter the whole trends view (or live actions view) by any key: value property pair, ideally with some automatic suggestions

That's in the posthog.com account.

I think it's because having no pre-defined actions (or perhaps no actions that have taken place) is causing it to die. From the console:

TypeError: Cannot read property 'labels' of undefined
    at c.value (src.ddecd904.js:179)
    at so (src.ddecd904.js:12)
    at co (src.ddecd904.js:12)
    at Bo (src.ddecd904.js:12)
    at Qu (src.ddecd904.js:12)
    at Bu (src.ddecd904.js:12)
    at Iu (src.ddecd904.js:12)
    at src.ddecd904.js:12
    at exports.unstable_runWithPriority (src.ddecd904.js:8)
    at ia (src.ddecd904.js:12)
    at sa (src.ddecd904.js:12)
    at ca (src.ddecd904.js:12)
    at Nu (src.ddecd904.js:12)
    at Object.enqueueSetState (src.ddecd904.js:12)
    at c.h.setState (src.ddecd904.js:4)
    at src.ddecd904.js:179
(anonymous) @ instrument.ts:113
trends

Bug: Funnel not appearing on editing it

If I click the edit button on this funnel, it just takes me to a blank page. Perhaps that because it's not named?

https://sentry.io/organizations/hiberly-cd/issues/1505964682/?project=1899813&query=is%3Aunresolved

Solve: https://gist.github.com/perrygeo/ee7c65bb1541ff6ac770

At https://app.posthog.com/setup:

It currently says:

Setup your PostHog account
What URL will you be using PostHog on?

## Suggestion

Change this to

Setup your PostHog account
What is the domain you will you be using PostHog on?

MIXPANEL_CUSTOM_LIB_URL needs removing. Find/replace MIXPANEL.

This should be bottlenecked until we get some people to start download the docker image and is here as a placeholder.

Currently, the docker image looks very empty. Since it is hosted locally, it is hard to configure or set up.

We have a nice /demo, with an example HogFlix website. This is bundled with the image. However, there are no instructions for how to do this in the UX (we should create a separate documentation ticket for that too).

If collapsed make it look like this:

Expanded it should look like this

It is possible to unselect all of these "unselect all", then to add them manually.

• However, when the page initially loads OR after 'Select all' , it is impossible to use the checkbox to unselect an indiviudal action
• The 'only' text feels redundant. Sure it's easier just co click unselect all then to select one. It feels weird.

That 'Sign Up!' text is what is grabbed automatically with inspect element.

However, if 'Sign Up!' is the string used here:

Then it doesn't detect the events unless the exclamation mark is stripped so it looks like the screenshot above.

The good news: being able to see all the events made debugging this possible - it looks like the ! is not passed to the event properties.

The toolbar for defining Actions doesn't make two things clear:

• When you create multiple inputs (Text / Selector / Only match if URL contains) in one Action - they are AND statements
• When you combine multiple match groups to one Action - they are OR statements.

I think the easiest way to do this quickly for now is to put an 'info' icon, that pops up and provides this information for more detail.

I went from a funnel page to 'edit' individual actions, this is the result:

Logged in as [email protected] at app.posthog.com

Then add some events to posthog itself (META)

Clients will need to understand what the trend is in the way their products are being used.

This means they will need to be able to see a list of actions over time.

They will also need to be able to visualize this data (as there will be a lot).

Log (url: /Actions)

Trends (url: /Actions/Trends)

• How do I deploy locally with docker?
• How do I deploy in production with docker?
  • If I have pre-existing infrastructure
  • If I don't

Here, I have chosen to breakdown the action by the browser.

In the table view it works fine:

Choosing breakdown doesn't change the graph though:

The fancy solution would be creating new lines for each of the broken-down Action items, ie 'Action - OS X', 'Action - Windows', so you can see the trends by browser.

If that's hard, I'd suggest the table is ok for now - it should just switch you to that automatically, else it's weird UX to choose breakdown then for it "not" to do anything.

At the moment, our sign up flow as designed for our beta.

There are several user types:

• Users that want to self-install
• Users that want a demo
• Users that want to start now with a hosted version

Self install

• Add code snippets to the sign up page. There are a few variations:
  • Self-install local docker image
  • Self-install production version
• Make docs easily visible next to the code snippet

I think we tick all of these boxes and could do MIT for a 'Free' version.

I think APGL is the closest alternative. This would prevent someone forking then competing as you have to carry the license through any modifications. I think it would potentially harm the open source initial adoption in precisely the types of developers we need - as i think many corp developers have repo scanning for licenses (ie Gitlab doe this) that mean they'd have to go through an internal review to even muck about locally.

Since our model isn't profiting from hosting SSPL isn't relevant (if AWS host it and get us inbound interest, perfect).

BSL would be too open and would kill the ability to monetise.

@timgl MIT is my vote for the PH Free edition. Do you agree?

I'd rather:

• Turn the current page into "pricing"
• Improve the documentation to explain product detail
• Create a page by role, that explains what's cool about what we do for each of
  • Marketing ("Reduce CPA") - segmentation, funnels
  • Product ("Know how people use your stuff") - action tracking, trends, user engagement (that last bit needs some thought as a product item)
  • Engineering ("Host it yourself") - Docker / no maintenance

"New Action" button takes me to /null

Logged in as [email protected]

Wanted to create actions for posthog.com's site - I've put the tracking into the header

https://app.posthog.com/funnel returns the wrong count - there aren't 112 steps in the funnel, for https://app.posthog.com/funnel/11 logged in as [email protected]

See the console. This error appears when selecting something from step 2 in the dropdown.

Clients will need to be able to view all their users.

They will want this to work out which users are using the product a lot, and which aren't.

Log

The most complex piece of functionality would be making it possible to add a column for the particular Actions that our Clients have defined. This would display the volume of that action.

Note, there is an Account column. This would be for a "team" of users, so B2B clients can view a whole account's overall usage. We need this to be part of the initial set up for Clients (in the /Settings page)

Log/Profile

Clients need to be able to then dig further into an individual User, to try to understand why Users are using it a lot or not using it much. Each of their users should have a log/profile/38 (for example). This should

• Display the profile information for the User - the ID, whatever has come from their internal systems (we should let them pass fields in the /Settings page)
• Display a timeline of the Actions of that User.

Trends

This would be the same graph as in #3 - it would need time on the x axis and volume on the y axis.

• The difference is that it would need to display all of these actions filtered by user. A Client would need to be able to show multiple actions carried
• For it to be more powerful, Clients would also need to be a select multiple users, then to be able to view the same Actions aggregated "how much are Joe and Bob doing actions X and Y together", OR segmented "how much is Joe doing actions X and Y versus Bob".

Allow comparing any trend to the same period x time back.

app.posthog.com/actions

The 'pop out' way of doing this is a lot more obvious (with the sidebar) since you can see the product you are tracking, is also offering it "in the app" just making it more confusing? Editing them in the app DOES make sense to me though and is nice.

Sidebar

Sidebar item 1

You have to put an action name, then you can save the action without even adding a matchgroup. I would suggest the 'save action' and 'save & new action' buttons don't appear unless a match group is added.

Sidebar - match element

There are three action types you can pick: match element, match event and page view.

• Match Element

• * This has an event name shown that isn't editable by default. So why even show it? $autocapture doesn't make any sense to me
• * 'inspect element' is a really important button, yet it's not even capitalised and it needs margin: 10px; or something adding
• * Under 'inspect element' there are a bunch of text inputs. Would there ever be a time when these should be shown BEFORE the element is clicked with inspect element? If not, they should appear once that is done - else as a user I don't know where to start.
• * Once I have selected an element, ideally I'd have it populate the link href, the element name, the text, and the selector by default THEN just have one of these pre-selected.
• * I don't actually know what 'Match url' does. Does it mean this specific element is matched but ONLY on this page, or does it turn it into a page view instead? Clarifying the language would help.
• [ ]

Sidebar - Match Event

• * When I use this for posthog.com's tracking, it doesn't let me actually input any text into the event name so I think there is a bug:

• * I also don't understand how to use this - do I need to just write in an event that matches the name of an event in the javascript? A line of explanation would help (perhaps an 'i' type icon?)
• * Same logic re 'Save action' as above - this shouldn't show unless an action has actually been created - there are otherwise too many buttons on show at once that don't make sense to show yet.

Sidebar - Page View

• * This shows 'event name' as $pageview, and is non editable. Why even show that? It just looks technical and doesn't help me as a user in any way.
• * Can I put regex or anything into Match url? It sort of feels like I could, but maybe I can't. If this function exists, put an 'i' type icon with some explanation, else don't.

"Yo, go to 127 whatever" - James 2019

Clarification

Language note: "users" can be confusing for us, given we track our users' users. I will refer to "clients" meaning the people using OUR software, and "users" meaning the users of their software.

Product need

We track events automatically.

We track front end events because tracking back end events would require adapting to either different programming languages and/or databases, and would require our clients' developers to map these events - a technical marketer or product person wouldn't be able to do it.

We have the concept of an "Action". This is 1 or more events that are particularly important to our clients. For example, creating a user profile, submitting a blog post, running a search.

Multiple events could be the same Action - a form may appear in several places on a website, but it would do the same thing in the browser.

A key competitive advantage is that we track every event by default, so the tracking never loses information.

This means that users need to be able to create actions, and then attach events to them.

Events also need properties "signed up" could then contain one of "with Google | with work email | with GitHub".

Mapping UX

The first thing a user needs to do is to create an Action.

Then they need to be able to "go" to their app or website to tag the Action.

An Action is comprised of Steps. Steps contain Events.

This means we can add more logic to the steps if needed in future (IF/OR etc)

Due to nesting and how we store events, even a simple click on our home page stores 21 Elements. Obviously the element has not changed. This will be a problem as we (or some customers) start scaling.

Options:

• 'fingerprint' of elements that we can store against the Event (like xpath, simmer selector etc)
• Upside: this will probably reduce lots of complication with the queries
• Store elements against a Super Element of some sort
• Downsides: even more complication

Our Clients need to be able to define Actions. We capture so many Events that if we just showed them all, the majority won't be useful.

Requirements

• An Action is made up of one or more Steps.
• A Step contains an Event.
• Steps can contain conditional logic (this Event OR this Event = a Step)
• Use the URL: /Actions/Configuration

UX

We are going to use the same components for the right hand sidebar (the one used to map the Events to a Step). Since that also allows stringing together Steps into an Event.

The difference between the sidebar and the application, is that it's not possible to tag an Event as a Step in the application (it's necessary to go to our Client's app to do this with the sidebar).

In the application, it's necessary for a Client to be able to create an Action from existing Steps. The Client also needs to be able to create a new Step - which will link them to their own app's homepage, but with our sidebar opened.

(This also means, when a new Client is created, we need them to give their app's URL)

I added https://posthog.com, then went to add an action.

It's taking me to the URL correctly, but the sidebar isn't appearing.

I have tried this logged in and out.

This is the error, it is referring to PostHog snippet:

This is annoying, and it even throws you off the 'elements' tab for example.

https://github.com/posthog/posthog-python

If I click anywhere outside the toolbar, then click back BEFORE naming the action, I then cannot click into the action to name it. If I start typing when the page loads, it's fine.

See the error in the console:

Warning: Invalid DOM property `crossorigin`. Did you mean `crossOrigin`?
    in link (created by App)
    in v (created by ForwardRef)
    in b (created by ForwardRef)
    in div (created by ForwardRef)
    in ForwardRef (created by App)
    in App
warningWithoutStack @ react-dom.development.js:530
warning @ react-dom.development.js:1018
validateProperty$1 @ react-dom.development.js:7455
warnUnknownProperties @ react-dom.development.js:7505
validateProperties$2 @ react-dom.development.js:7528
validatePropertiesInDevelopment @ react-dom.development.js:7575
setInitialProperties @ react-dom.development.js:7860
finalizeInitialChildren @ react-dom.development.js:9478
completeWork @ react-dom.development.js:21095
completeUnitOfWork @ react-dom.development.js:24730
performUnitOfWork @ react-dom.development.js:24706
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPassiveEffectsImpl @ react-dom.development.js:25420
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
(anonymous) @ react-dom.development.js:25240
workLoop @ scheduler.development.js:641
flushWork @ scheduler.development.js:596
performWorkUntilDeadline @ scheduler.development.js:203

The funnel naming for [email protected] at app.posthog.com just doesn't seem to save names.

I can't see any errors appearing in the Console.

Do I need to click 'save' somewhere and the button isn't appearing?

If I save this action:

and I leave 'Match url' unticked... if I click 'Save action' then refresh the page, the 'Match ur' box is checked (although the URL is empty).

Goal

Make an awesome product-focussed demo.

• Make a video that can play (use https://en.wikipedia.org/wiki/Big_Buck_Bunny)
• Use HTML5 elements to manipulate a video. Play / Pause.
• Build a "Post Review" form
• Build a "Rating" button

# Video Script

• Go to HogFlix
• Choose a move
• Press play
• Press pause
• Submit a review
• Submit a rating
• Go to app.hiblerly.com
• Show a funnel (play -> submit review)
• Show a user profile (movies watched, reviews left), with their contact details so we'd know we could nudge them to leave a review for a particular movie