mirror of
https://github.com/BillyOutlast/posthog.com.git
synced 2026-02-04 03:11:21 +01:00
fix: Broken links to old pipeline features (#12265)
This commit is contained in:
Ben White
@@ -117,7 +117,7 @@ The second part of the move to Temporal was making processes transparent both in
|
||||
|
||||
As mentioned in the last section, Temporal creates transparency into the completions, errors, and latency of workflows. We also track bytes and records exported. These enable us to improve the export system further and faster than the old system.
|
||||
|
||||
For users, the old system hides runs. Exports now [have their own page](https://app.posthog.com/project/apps?tab=batch_exports). On this page, users can:
|
||||
For users, the old system hides runs. Exports now [have their own page](https://app.posthog.com/pipeline/destinations). On this page, users can:
|
||||
|
||||
- Configure, start, [pause, unpause](https://github.com/PostHog/posthog/pull/16050), reset, [edit](https://github.com/PostHog/posthog/pull/16869), and [delete](https://github.com/PostHog/posthog/pull/16066) exports.
|
||||
|
||||
|
||||
@@ -60,7 +60,7 @@ Navigate to IAM and click on Grant Access to arrive at this screen:
|
||||
|
||||
|
||||
|
||||
8. All done! After completing these steps you can create a BigQuery [batch export in PostHog](https://app.posthog.com/project/apps?tab=batch_exports) and your data will start flowing from PostHog to BigQuery.
|
||||
8. All done! After completing these steps you can create a BigQuery [batch export in PostHog](https://app.posthog.com/pipeline/new/destination?search=bigquery) and your data will start flowing from PostHog to BigQuery.
|
||||
|
||||
## Models
|
||||
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
title: Convert URL query parameters to event properties
|
||||
github: 'https://github.com/PostHog/posthog-app-url-parameters-to-event-properties'
|
||||
installUrl: 'https://app.posthog.com/project/apps?name=url-query-parameter-converter'
|
||||
thumbnail: >-
|
||||
https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/cdp/thumbnails/url-query.png
|
||||
tags:
|
||||
- url-query
|
||||
---
|
||||
|
||||
import Requirements from "./_snippets/requirements.mdx"
|
||||
import FeedbackQuestions from "./_snippets/feedback-questions.mdx"
|
||||
import CommunityMaintained from "./_snippets/community-maintained.mdx"
|
||||
|
||||
This transformation automatically converts URL query parameters for specific terms into event properties in PostHog, enabling you to analyse them like any other data point. This can be useful for seeing how your product or content converts based on search terms.
|
||||
|
||||
<Requirements />
|
||||
|
||||
## Installation
|
||||
|
||||
1. In PostHog, click the "[Data pipeline](https://us.posthog.com/pipeline)" tab in the left sidebar.
|
||||
2. Search for 'URL query parameter converter' and select the transformation, press Install.
|
||||
3. Configure the transformation to whitelist the parameters you want to turn into events.
|
||||
|
||||
That's it!
|
||||
|
||||
## FAQ
|
||||
|
||||
### Is the source code for this transformation available?
|
||||
|
||||
PostHog is open-source and so are all transformations on the platform. The [source code for this transformation](https://github.com/PostHog/posthog-app-url-parameters-to-event-properties) is available on GitHub.
|
||||
|
||||
### Who created this transformation?
|
||||
|
||||
We'd like to thank PostHog community member [Benjamin Werker](https://github.com/everald) for creating this app.
|
||||
|
||||
<CommunityMaintained />
|
||||
|
||||
<FeedbackQuestions />
|
||||
|
||||
@@ -60,7 +60,7 @@ To use it:
|
||||
|
||||
1. Ensure you set `opt_in_site_apps: true` in your PostHog [initialization configuration](/docs/libraries/js/config).
|
||||
|
||||
2. Search for [Early Access Features App](https://app.posthog.com/project/apps?name=Early%20Access) in the [Browse Apps](https://app.posthog.com/project/apps) tab.
|
||||
2. Search for [Early Access Features App](https://app.posthog.com/pipeline/new/site-app?search=Early%20Access) in the [Browse Apps](https://app.posthog.com/pipeline/new/site-app) tab.
|
||||
|
||||
3. Enable it by clicking the blue gear, setting an HTML attribute selector like `data-attr`, `#id`, or `.class` (or enabling "Show features button on the page"), enabling the toggle and pressing save.
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ Apps can help you:
|
||||
|
||||
### Installation
|
||||
|
||||
Below is a list of all our apps for bringing data and events into PostHog. Apps can be installed from the app section in the [dashboard](https://app.posthog.com/project/apps).
|
||||
Below is a list of all our apps for bringing data and events into PostHog. Apps can be installed from the app section in the [dashboard](https://app.posthog.com/pipeline/site-apps).
|
||||
|
||||
For information on how to set up each pipeline, the list below contains links to each pipelines's documentation page.
|
||||
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
---
|
||||
title: Notification Bar
|
||||
github: 'https://github.com/PostHog/notification-bar-app'
|
||||
installUrl: 'https://app.posthog.com/project/apps?name=Notification-bar'
|
||||
thumbnail: >-
|
||||
https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/apps/thumbnails/notification-bar.png
|
||||
topics:
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
---
|
||||
title: Pineapple Mode
|
||||
github: 'https://github.com/PostHog/pineapple-mode-app'
|
||||
installUrl: 'https://app.posthog.com/project/apps?name=pineapple-mode'
|
||||
thumbnail: >-
|
||||
https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/apps/thumbnails/pineapple-mode.png
|
||||
tags:
|
||||
|
||||
@@ -18,7 +18,7 @@ This tutorial shows you how to combine PostHog’s [early access management](/do
|
||||
|
||||
To create a beta feature in PostHog, go to the [early access management tab](https://app.posthog.com/early_access_features) and click "Create feature". Add a name like "new page beta," click "Save as draft," and then "Release beta." This also automatically creates a [feature flag](/docs/feature-flags) we use to control the display of the feature.
|
||||
|
||||
On the draft page, click "Implement public opt-in" and go to the [opt-in app page](https://app.posthog.com/project/apps/574). Enable the app and set "Show features button on the page" to "Yes." This adds a modal to control early access features with no extra setup.
|
||||
On the draft page, click "Implement public opt-in" and go to the [opt-in app page](https://app.posthog.com/pipeline/new/site-app/hog-template-early-access-features). Enable the app and set "Show features button on the page" to "Yes." This adds a modal to control early access features with no extra setup.
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ cd fake-door
|
||||
npm i posthog-js
|
||||
```
|
||||
|
||||
After installing `posthog-js`, set up the PostHog initialization. This requires going to our `app` folder, creating a `providers.js` file, adding our PostHog initialization behind a window check with `opt_in_site_apps: true` (for later), and creating a provider component like this:
|
||||
After installing `posthog-js`, set up the PostHog initialization. This requires going to our `app` folder, creating a `providers.js` file, adding our PostHog initialization behind a window check, and creating a provider component like this:
|
||||
|
||||
```js-web
|
||||
// app/providers.js
|
||||
@@ -44,8 +44,7 @@ export function PHProvider({ children }) {
|
||||
useEffect(() => {
|
||||
posthog.init('<ph_project_api_key>', {
|
||||
api_host: '<ph_client_api_host>',
|
||||
defaults: '<ph_posthog_js_defaults>',
|
||||
opt_in_site_apps: true
|
||||
defaults: '<ph_posthog_js_defaults>'
|
||||
})
|
||||
}, []);
|
||||
|
||||
@@ -139,8 +138,6 @@ Next, we can set up the survey we mention. To do this, go to the [surveys tab in
|
||||
3. Add a target on URLs containing `/new`.
|
||||
4. Click "Save as draft."
|
||||
|
||||
Because we set `opt_in_site_apps: true` in our PostHog initialization earlier, all we need to do is enable the survey site app. Either click the link on your draft survey page or go to the [apps tab](https://app.posthog.com/project/apps) and search for "Surveys app," enable it, and press save.
|
||||
|
||||
> **Don’t want a popover?** You can learn how to implement an integrated, custom survey component in our "[How to create custom surveys](/tutorials/survey)" tutorial.
|
||||
|
||||
Once done, we can go back to our draft survey and press "Launch." Now, users who visit the `/new` page get a survey so we can get further validation on our fake door test. PostHog saves survey responses which you can use to guide your feature development.
|
||||
|
||||
@@ -48,7 +48,7 @@ import IsUS from 'components/IsUS'
|
||||
|
||||
const DestinationsLibraryCallout = () => {
|
||||
return (
|
||||
<div className="p-4 bg-accent dark:bg-accent-dark rounded-md border border-border dark:border-dark mb-4">
|
||||
<div className="p-4 mb-4 rounded-md border bg-accent dark:bg-accent-dark border-border dark:border-dark">
|
||||
<h2 className="font-bold text-lg leading-tight !m-0">Did somebody say destinations?</h2>
|
||||
<p className="m-0 !mb-3 !mt-1.5">
|
||||
We're building new destinations and want your input on what to build next.
|
||||
@@ -65,19 +65,19 @@ const renderAvailabilityIcon = (availability: 'full' | 'partial' | 'none') => {
|
||||
case 'full':
|
||||
return (
|
||||
<Tooltip content="This plan has full access to this feature">
|
||||
<img src={CheckIcon} alt="Available" className="h-4 w-4" aria-hidden="true" />
|
||||
<img src={CheckIcon} alt="Available" className="w-4 h-4" aria-hidden="true" />
|
||||
</Tooltip>
|
||||
)
|
||||
case 'partial':
|
||||
return (
|
||||
<Tooltip content="Some parts of this feature are not available on this plan">
|
||||
<img src={WarningIcon} alt="Partially available" className="h-4 w-4" aria-hidden="true" />
|
||||
<img src={WarningIcon} alt="Partially available" className="w-4 h-4" aria-hidden="true" />
|
||||
</Tooltip>
|
||||
)
|
||||
case 'none':
|
||||
return (
|
||||
<Tooltip content="This feature is not available on this plan">
|
||||
<img src={XIcon} alt="Not available" className="h-4 w-4" aria-hidden="true" />
|
||||
<img src={XIcon} alt="Not available" className="w-4 h-4" aria-hidden="true" />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
@@ -94,7 +94,7 @@ const Contributors = (props) => {
|
||||
const contributors = expanded ? props.contributors : props.contributors.slice(0, 3)
|
||||
const more = props.contributors.length - 3
|
||||
return (
|
||||
<div className={`mb-4 flex flex-col gap-2 -mx-4`}>
|
||||
<div className={`flex flex-col gap-2 -mx-4 mb-4`}>
|
||||
{contributors.map(({ avatar, username, profile, url }) => {
|
||||
return (
|
||||
<Contributor
|
||||
@@ -110,8 +110,8 @@ const Contributors = (props) => {
|
||||
)
|
||||
})}
|
||||
{more > 0 && !expanded && (
|
||||
<button onClick={() => setExpanded(true)} className="mx-4 flex space-x-2 items-center">
|
||||
<span className="text-sm text-red font-bold text-left flex-shrink-0">+{more} more</span>
|
||||
<button onClick={() => setExpanded(true)} className="flex items-center mx-4 space-x-2">
|
||||
<span className="flex-shrink-0 text-sm font-bold text-left text-red">+{more} more</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -123,8 +123,8 @@ export const HandbookSidebar = ({ contributors, title, location, availability, r
|
||||
<>
|
||||
{location.pathname.startsWith('/docs/cdp/destinations') &&
|
||||
location.pathname !== '/docs/cdp/destinations' && (
|
||||
<div className="p-4 bg-accent dark:bg-accent-dark rounded-md border border-border dark:border-dark mb-8">
|
||||
<h5 className="text-lg font-bold leading-tight m-0">Did somebody say destinations?</h5>
|
||||
<div className="p-4 mb-8 rounded-md border bg-accent dark:bg-accent-dark border-border dark:border-dark">
|
||||
<h5 className="m-0 text-lg font-bold leading-tight">Did somebody say destinations?</h5>
|
||||
<p className="text-sm m-0 mb-3 mt-1.5">
|
||||
We're building more destinations and prioritzing them based on your feedback.
|
||||
</p>
|
||||
@@ -141,21 +141,21 @@ export const HandbookSidebar = ({ contributors, title, location, availability, r
|
||||
|
||||
{availability && (
|
||||
<SidebarSection title="Feature availability" className="space-y-1.5">
|
||||
<div className="flex items-center justify-between font-bold">
|
||||
<div className="flex justify-between items-center font-bold">
|
||||
<span>Free / Open-source</span>
|
||||
{renderAvailabilityIcon(availability.free)}
|
||||
</div>
|
||||
<div className="flex items-center justify-between font-bold">
|
||||
<div className="flex justify-between items-center font-bold">
|
||||
<span>Self-serve</span>
|
||||
{renderAvailabilityIcon(availability.selfServe)}
|
||||
</div>
|
||||
{availability.teams && (
|
||||
<div className="flex items-center justify-between font-bold">
|
||||
<div className="flex justify-between items-center font-bold">
|
||||
<span>Teams</span>
|
||||
{renderAvailabilityIcon(availability.teams)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between font-bold">
|
||||
<div className="flex justify-between items-center font-bold">
|
||||
<span>Enterprise</span>
|
||||
{renderAvailabilityIcon(availability.enterprise)}
|
||||
</div>
|
||||
@@ -167,7 +167,7 @@ export const HandbookSidebar = ({ contributors, title, location, availability, r
|
||||
<ul className="p-0 space-y-1.5">
|
||||
{related.map(({ childMdx }) => (
|
||||
<li key={childMdx.fields.slug} className="list-none">
|
||||
<Link to={childMdx.fields.slug} className="text-sm block">
|
||||
<Link to={childMdx.fields.slug} className="block text-sm">
|
||||
{childMdx.frontmatter.title}
|
||||
</Link>
|
||||
</li>
|
||||
@@ -235,7 +235,7 @@ export const AppParametersFactory: (params: AppParametersProps) => React.FC = ({
|
||||
<tr key={option.key}>
|
||||
<td>
|
||||
<div className="mb-6">
|
||||
<code className="dark:bg-gray-accent-dark dark:text-white bg-gray-accent-light text-inherit p-1 rounded">
|
||||
<code className="p-1 rounded dark:bg-gray-accent-dark dark:text-white bg-gray-accent-light text-inherit">
|
||||
{option.name}
|
||||
</code>
|
||||
</div>
|
||||
@@ -314,7 +314,6 @@ export default function Handbook({
|
||||
features,
|
||||
github,
|
||||
availability,
|
||||
installUrl,
|
||||
thumbnail,
|
||||
related,
|
||||
seo,
|
||||
@@ -326,15 +325,11 @@ export default function Handbook({
|
||||
|
||||
const isArticle = frontmatter.isArticle !== false
|
||||
|
||||
const [showCTA, setShowCTA] = React.useState<boolean>(
|
||||
typeof window !== 'undefined' ? Boolean(getCookie('ph_current_project_token')) : false
|
||||
)
|
||||
|
||||
const A = (props) => (
|
||||
<Link
|
||||
{...props}
|
||||
glossary={glossary?.nodes?.map(formatNode)}
|
||||
className="text-red hover:text-red font-semibold"
|
||||
className="font-semibold text-red hover:text-red"
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -411,20 +406,20 @@ export default function Handbook({
|
||||
askMax
|
||||
>
|
||||
<section>
|
||||
<div className="mb-8 relative">
|
||||
<div className="flex items-center mt-0 flex-wrap justify-between">
|
||||
<div className="flex flex-col-reverse md:flex-row md:items-center space-x-2 mb-1 w-full">
|
||||
<div className="relative mb-8">
|
||||
<div className="flex flex-wrap justify-between items-center mt-0">
|
||||
<div className="flex flex-col-reverse mb-1 space-x-2 w-full md:flex-row md:items-center">
|
||||
{thumbnail && <GatsbyImage image={getImage(thumbnail)} />}
|
||||
{showTitle !== false && (
|
||||
<div className="flex-1">
|
||||
<h1 className="dark:text-white text-3xl sm:text-4xl m-0">{title}</h1>
|
||||
<h1 className="m-0 text-3xl dark:text-white sm:text-4xl">{title}</h1>
|
||||
{description && (
|
||||
<p className="italic opacity-75 leading-tight mt-1 mb-0">
|
||||
<p className="mt-1 mb-0 italic leading-tight opacity-75">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
{(!hideLastUpdated || filePath || contentWithSnippets) && (
|
||||
<div className="flex space-x-2 items-center mb-4 md:mt-1 md:mb-0 text-black dark:text-white">
|
||||
<div className="flex items-center mb-4 space-x-2 text-black md:mt-1 md:mb-0 dark:text-white">
|
||||
{!hideLastUpdated && (
|
||||
<p className="m-0 font-semibold text-primary/30 dark:text-primary-dark/30">
|
||||
Last updated: <time>{lastUpdated}</time>
|
||||
@@ -466,14 +461,9 @@ export default function Handbook({
|
||||
<div className="flex items-center space-x-2">
|
||||
{github && (
|
||||
<Link to={github}>
|
||||
<GitHub className="w-8 h-8 text-black/80 hover:text-black/60 dark:text-white/80 hover:dark:text-white/60 transition-colors" />
|
||||
<GitHub className="w-8 h-8 transition-colors text-black/80 hover:text-black/60 dark:text-white/80 hover:dark:text-white/60" />
|
||||
</Link>
|
||||
)}
|
||||
{installUrl && showCTA && (
|
||||
<CallToAction size="sm" to={installUrl}>
|
||||
<span className="text-[17px] md:px-1 md:py-0.5">Install</span>
|
||||
</CallToAction>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -602,7 +592,6 @@ export const query = graphql`
|
||||
}
|
||||
}
|
||||
}
|
||||
installUrl
|
||||
featuredImage {
|
||||
publicURL
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user