Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improving the Install page #7443

Merged
merged 13 commits into from
Jan 8, 2024
Merged

Improving the Install page #7443

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f377615
Tweaks to install snippet
joethreepwood Jan 4, 2024
a79cc31
Update contents/docs/getting-started/install.mdx
joethreepwood Jan 4, 2024
c04a701
Update contents/docs/getting-started/install.mdx
joethreepwood Jan 4, 2024
0d4206c
Update contents/docs/integrate/_snippets/install-js-snippet.mdx
joethreepwood Jan 4, 2024
fec0008
Update contents/docs/integrate/_snippets/install-js-snippet.mdx
joethreepwood Jan 5, 2024
2ccf886
Update contents/docs/getting-started/install.mdx
joethreepwood Jan 5, 2024
3c5c09b
Update contents/docs/getting-started/install.mdx
joethreepwood Jan 5, 2024
4018227
Update contents/docs/getting-started/install.mdx
joethreepwood Jan 5, 2024
fb7c2a4
Update contents/docs/getting-started/install.mdx
joethreepwood Jan 5, 2024
221677a
Update contents/docs/integrate/_snippets/install-js-snippet.mdx
joethreepwood Jan 5, 2024
e865b45
Update contents/docs/integrate/_snippets/install-js-snippet.mdx
joethreepwood Jan 5, 2024
c53b1a0
Update contents/docs/integrate/_snippets/install-js-snippet.mdx
joethreepwood Jan 5, 2024
baca6d9
Update contents/docs/integrate/_snippets/install-js-snippet.mdx
joethreepwood Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions contents/docs/getting-started/install.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,15 @@ featuredImage: ./images/docs-install.png
hideAnchor: true
---

Once your PostHog instance is up and running, the next step is to get PostHog installed.

> **Tip**: Even if you have multiple customer-facing products e.g. a marketing website + iOS app + web app, it works best to have them share the same project to track the user across their journey. See: [Organizations & projects docs](/manual/organizations-and-projects)
> **Tip**: If you have multiple customer-facing products (e.g. a marketing website + iOS app + web app), it's best to install PostHog on them all and [group them in one project](/docs/data/organizations-and-projects). This way you can track the user across their entire journey.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
> **Tip**: If you have multiple customer-facing products (e.g. a marketing website + iOS app + web app), it's best to install PostHog on them all and [group them in one project](/docs/data/organizations-and-projects). This way you can track the user across their entire journey.
> **Tip**: If you have multiple products (e.g. a marketing website + iOS app + web app), it's best to install PostHog on them all and [group them in one project](/docs/data/organizations-and-projects). This way you can track the user across their entire journey.


<h3 class="mb-0 mt-6">Installation</h3>

import Install from "./\_snippets/install.mdx"

<Install />

#### Set up a reverse proxy (optional)

We recommend setting up a reverse proxy to send events to PostHog using your domain, so they're less likely to be intercepted by tracking blockers. There are several [options for creating a reverse proxy](/docs/advanced/proxy), including using [Cloudflare](/docs/advanced/proxy/cloudflare), [AWS Cloudfront](/docs/advanced/proxy/cloudfront), and [Vercel](/docs/advanced/proxy/vercel).
15 changes: 6 additions & 9 deletions contents/docs/integrate/_snippets/install-js-snippet.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
import Snippet from "../snippet.mdx"

> This is the simplest way to get PostHog up and running on your website, and only takes a few minutes to set-up.
This is the simplest way to get PostHog up and running. It only takes a few minutes.

#### Add to your website &amp; app
#### Add to your website and product

Paste this snippet within the `<head>` tags of your website - ideally just inside the closing `</head>` tag - on all pages that you wish to track.
Copy the snippet below and replace `<ph_project_api_key>` and `<ph_instance_address>` with your project's values, then add it within the `<head>` tags of your product - ideally just before the closing `</head>` tag - on pages you want to track.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One thing is the <ph_project_api_key> and instance_address get automatically filled if those details are available (I think by using the logged in cookie), so there is a chance someone sees this and they don't have those values below.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm. Not sure I can see how we can accomodate that though. Probably best to leave it?


You can find the snippet pre-filled with this data in [your project settings](https://app.posthog.com/project/settings).

<Snippet />

Be sure to replace `<ph_project_api_key>` and `<ph_instance_address>` with your project's values. (You can find the snippet pre-filled with this data in the PostHog app under Project / Settings. _(Quick links if you use [PostHog Cloud US](https://app.posthog.com/project/settings) or [PostHog Cloud EU](https://eu.posthog.com/project/settings))_
Once the snippet is added, PostHog automatically captures `$pageview` and [other events](/docs/data/autocapture) like button clicks. You can then enable other products, such as session replays, within [your project settings](https://us.posthog.com/settings/project-replay).

#### What this code does

After adding the snippet to your website, it will automatically start to:

- Capture `$pageview` events when a user visits a page
- Track when users [click on links or buttons](/docs/data/autocapture)
- [Record videos of user sessions](/docs/user-guides/recordings) that you can play back (if you've enabled the Session recordings feature, which we highly recommend!)
Loading