feat: Install PostHog and implement data capture on various buttons #1437

chadstewart · 2022-05-10T13:59:18Z

What type of PR is this? (check all applicable)

Description

This PR [adds] the [feature] posthog logging.

Related Tickets & Documents

Resolves #1430 and resolves #1434

Mobile & Desktop Screenshots/Recordings

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

github-actions

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Watched Files

This pull request modifies specific files that require careful review by the maintainers.

Files Matched

npm-shrinkwrap.json
package.json

bdougie · 2022-05-10T14:09:53Z

src/index.jsx

@@ -24,6 +25,8 @@ function Index() {
  const [isAdmin, setIsAdmin] = useState(null);

  useEffect(() => {
+    posthog.init('phc_QFGGi71ugzUOXTLUTwMHVTlaHhDBolEC3XNVHNFHKmz', { api_host: 'https://app.posthog.com' });


Might need to put this into ENV var POSTHOG_ID

0-vortex · 2022-05-10T14:14:36Z

For #1430 a very small wrapper could be useful, currently, we init PostHog in index.jsx, and then .capture works everywhere else. To make it easier to catch errors and standardize the way we send events from components, moving that code into something like lib/posthog or lib/analytics would centralize the way we implement PostHog across the app.

Other than that and extracting the environment variable to src/env.d.ts / .env the code LGTM! Would still leave #1430 and do it separately from this PR

chadstewart · 2022-05-10T15:30:16Z

For #1430 a very small wrapper could be useful, currently, we init PostHog in index.jsx, and then .capture works everywhere else. To make it easier to catch errors and standardize the way we send events from components, moving that code into something like lib/posthog or lib/analytics would centralize the way we implement PostHog across the app.

Other than that and extracting the environment variable to src/env.d.ts / .env the code LGTM! Would still leave #1430 and do it separately from this PR

That's a good idea, making the wrapper function. I'll go work on that now.

So the reason why I added both the issues to this PR was because the implement Posthog PR also required implementing data capture on the login button so I figured since I was adding it there, I might as well just add it to the onboarding buttons here rather than make a whole other PR. Figured referencing both issues and also having separate commits would give enough context.

0-vortex · 2022-05-10T15:47:00Z

For #1430 a very small wrapper could be useful, currently, we init PostHog in index.jsx, and then .capture works everywhere else. To make it easier to catch errors and standardize the way we send events from components, moving that code into something like lib/posthog or lib/analytics would centralize the way we implement PostHog across the app.
Other than that and extracting the environment variable to src/env.d.ts / .env the code LGTM! Would still leave #1430 and do it separately from this PR

That's a good idea, making the wrapper function. I'll go work on that now.

So the reason why I added both the issues to this PR was because the implement Posthog PR also required implementing data capture on the login button so I figured since I was adding it there, I might as well just add it to the onboarding buttons here rather than make a whole other PR. Figured referencing both issues and also having separate commits would give enough context.

I suggested splitting so the wrapper doesn't make the implementation go out of scope, if you want to work on it in this PR that's fine with me, minimal wrapper that logs in, captures event and potential errors; and moving the credentials to the env file should be enough to close both tickets! 🚀 🍕

chadstewart · 2022-05-10T15:52:16Z

I suggested splitting so the wrapper doesn't make the implementation go out of scope, if you want to work on it in this PR that's fine with me, minimal wrapper that logs in, captures event and potential errors; and moving the credentials to the env file should be enough to close both tickets! rocket pizza

Nah, I understand, makes sense. Just feels like this makes the most sense to me honestly.

Wanted to ask a quick question. How does the project work with .envs? I don't see an example of using an env variable outside of some stuff in Vite and I didn't want to go Googling stuff in case there was a particular set up that was there.

0-vortex · 2022-05-10T16:46:07Z

I suggested splitting so the wrapper doesn't make the implementation go out of scope, if you want to work on it in this PR that's fine with me, minimal wrapper that logs in, captures event and potential errors; and moving the credentials to the env file should be enough to close both tickets! rocket pizza

Nah, I understand, makes sense. Just feels like this makes the most sense to me honestly.

Wanted to ask a quick question. How does the project work with .envs? I don't see an example of using an env variable outside of some stuff in Vite and I didn't want to go Googling stuff in case there was a particular set up that was there.

Sorry for the late answer, https://vitejs.dev/guide/env-and-mode.html should cover everything on the documentation side.

To give specifics, we are using a "dev" local configuration for beta branches and making the git clone work for localhost. The phc_ token should be configured to only work for the selected endpoint in the cloud instance.

Making the phc_ token an environment variable's only purpose is to be able to rotate it across environments, it would still be technically public so the VITE_ notation should be fine, and committing to both env files if you like. This will make a little bit more sense when we apply the code you write in this PR into hot.opensauced 🍕

bdougie

LGTM

bdougie · 2022-05-11T02:00:58Z

Making the phc_ token an environment variable's only purpose is to be able to rotate it across environments, it would still be technically public so the VITE_ notation should be fine, and committing to both env files if you like. This will make a little bit more sense when we apply the code you write in this PR into hot.opensauced 🍕

I would love to also capture this in hot.opensauced

## [0.50.0](v0.49.0...v0.50.0) (2022-05-11) ### 🍕 Features * Install PostHog and implement data capture on various buttons ([#1437](#1437)) ([9a78906](9a78906))

github-actions · 2022-05-11T02:11:04Z

🎉 This PR is included in version 0.50.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chadstewart added 2 commits May 10, 2022 08:48

Implemented posthog on login button.

2e6a553

Added posthog capture to onboarding flow buttons.

50953b0

github-actions bot reviewed May 10, 2022

View reviewed changes

bdougie reviewed May 10, 2022

View reviewed changes

chadstewart added 2 commits May 10, 2022 13:42

Moved posthog into lib function.

5ba6f40

Updated posthog id to use env variable rather than raw coding id.

47aa4bb

bdougie approved these changes May 11, 2022

View reviewed changes

bdougie merged commit 9a78906 into main May 11, 2022

bdougie deleted the feature-posthog-installation branch May 11, 2022 02:08

github-actions bot added the released label May 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Install PostHog and implement data capture on various buttons #1437

feat: Install PostHog and implement data capture on various buttons #1437

chadstewart commented May 10, 2022 •

edited by mtfoley

github-actions bot left a comment •

edited

bdougie May 10, 2022 •

edited

0-vortex commented May 10, 2022

chadstewart commented May 10, 2022

0-vortex commented May 10, 2022

chadstewart commented May 10, 2022 •

edited

0-vortex commented May 10, 2022

bdougie left a comment

bdougie commented May 11, 2022

github-actions bot commented May 11, 2022

feat: Install PostHog and implement data capture on various buttons #1437

feat: Install PostHog and implement data capture on various buttons #1437

Conversation

chadstewart commented May 10, 2022 • edited by mtfoley

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

github-actions bot left a comment • edited

Choose a reason for hiding this comment

PR Compliance Checks

Watched Files

bdougie May 10, 2022 • edited

Choose a reason for hiding this comment

0-vortex commented May 10, 2022

chadstewart commented May 10, 2022

0-vortex commented May 10, 2022

chadstewart commented May 10, 2022 • edited

0-vortex commented May 10, 2022

bdougie left a comment

Choose a reason for hiding this comment

bdougie commented May 11, 2022

github-actions bot commented May 11, 2022

chadstewart commented May 10, 2022 •

edited by mtfoley

github-actions bot left a comment •

edited

bdougie May 10, 2022 •

edited

chadstewart commented May 10, 2022 •

edited