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.

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

Launch mobile replay to first-class product on site #9778

Closed
wants to merge 16 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
24 changes: 14 additions & 10 deletions src/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,8 @@ const linklist: IProps[] = [
url: '/cdp',
},
{
title: 'Customer stories',
url: '/customers',
},
{
title: 'PostHog vs...',
url: '/blog/tags/comparisons',
title: 'Mobile replay',
url: '/docs/session-replay/mobile',
},
{
title: 'For startups',
Expand All @@ -59,10 +55,6 @@ const linklist: IProps[] = [
title: 'Pricing',
url: '/pricing',
},
{
title: 'How we do "sales"',
url: '/sales',
},
],
},
{
Expand Down Expand Up @@ -135,6 +127,10 @@ const linklist: IProps[] = [
title: 'Migrate',
url: '/docs/migrate',
},
{
title: 'PostHog vs...',
url: '/blog/tags/comparisons',
},
],
},
{
Expand Down Expand Up @@ -169,6 +165,10 @@ const linklist: IProps[] = [
title: 'Tracks',
url: '/tracks',
},
{
title: 'Customer stories',
url: '/customers',
},
{
title: 'Merch',
url: '/merch',
Expand Down Expand Up @@ -235,6 +235,10 @@ const linklist: IProps[] = [
title: 'Marketing',
url: '/handbook/growth/marketing',
},
{
title: 'How we do "sales"',
url: '/sales',
},
],
},
{
Expand Down
2 changes: 1 addition & 1 deletion src/components/Home/Slider/Slides.js
Original file line number Diff line number Diff line change
Expand Up @@ -429,7 +429,7 @@ export const SessionReplay = () => {
bgColor="[#F2AD46]"
textColor="primary"
title="Session replay"
description="Watch users interacting with your app or website. Available for web, Android (beta), and iOS (alpha)."
description="Watch users interacting with your app or website. Available for web, Android, iOS and React Native (beta)."
features={features}
featureListClasses="sm:grid grid-cols-2 mdlg:flex"
imageColumn="md:pl-8 md:col-span-9 lg:col-span-10"
Expand Down
24 changes: 11 additions & 13 deletions src/components/Product/SessionReplay/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import CloudinaryImage from 'components/CloudinaryImage'
import React from 'react'
import Link from 'components/Link'
import MobileLibraries from 'components/Products/MobileLibraries'
import { StaticImage } from 'gatsby-plugin-image'
import {
IconRewindPlay,
Expand Down Expand Up @@ -90,7 +91,7 @@ const features = [
},
]

const subfeaturesItemCount = 5
const subfeaturesItemCount = 4
const subfeatures = [
{
title: 'Capture sessions without extra code',
Expand All @@ -102,11 +103,6 @@ const subfeatures = [
description: 'Filter by user behavior or time',
icon: <IconPlaylist />,
},
{
title: 'Web or mobile session recording',
description: 'Web or Android (beta) available',
icon: <IconPhone />,
},
{
title: 'Download recordings',
description: 'Retain recordings beyond data retention limits',
Expand All @@ -120,7 +116,6 @@ const subfeatures = [
]

const questions = [
{ question: 'Where do key events happen in my user’s sessions?' },
{
question: "How do I understand my users' behavior in funnels?",
url: '/tutorials/explore-insights-session-recordings#watching-users-through-funnels',
Expand All @@ -136,7 +131,6 @@ const questions = [
{ question: 'How do I figure out how to lower churn?', url: '/tutorials/churn-rate#session-recordings' },
{ question: 'How do I improve my support experience?', url: '/tutorials/session-recordings-for-support' },
{ question: 'How do I see where errors happen?', url: '/tutorials/session-recordings-for-support' },
{ question: 'How do I get bug recreation steps easily?' },
{
question: 'Why are users dropping off in my funnel?',
url: '/tutorials/explore-insights-session-recordings#watching-users-through-funnels',
Expand Down Expand Up @@ -340,7 +334,7 @@ const PairsWithArray = [
]

export const ProductSessionReplay = () => {
const { elevenlabs, hasura, netdata, pry } = useStaticQuery(graphql`
const { elevenlabs, hasura, netdata, swype } = useStaticQuery(graphql`
fragment ProductCustomerFragment on Mdx {
fields {
slug
Expand All @@ -364,7 +358,7 @@ export const ProductSessionReplay = () => {
netdata: mdx(slug: { eq: "customers/netdata" }) {
...ProductCustomerFragment
}
pry: mdx(slug: { eq: "customers/pry" }) {
swype: mdx(slug: { eq: "customers/swype" }) {
...ProductCustomerFragment
}
}
Expand Down Expand Up @@ -414,9 +408,9 @@ export const ProductSessionReplay = () => {
customer={netdata}
/>
<CustomerCard
outcome="improved registrations by 20-30%"
quote="We've improved our whole onboarding flow by about 5% too, which is great."
customer={pry}
outcome="uses mobile replays to speed up app testing"
quote="Replays help us see how our mobile app looks on different devices and screen sizes."
customer={swype}
/>
</ul>
</section>
Expand All @@ -439,6 +433,10 @@ export const ProductSessionReplay = () => {
</ul>
</section>

<section>
<MobileLibraries />
</section>

<section className="bg-accent dark:bg-accent-dark">
<Marquee product={product.capitalized}>
{questions.map((question, index) => {
Expand Down
137 changes: 137 additions & 0 deletions src/components/Products/MobileLibraries/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import CloudinaryImage from 'components/CloudinaryImage'
import React from 'react'
import { StaticImage } from 'gatsby-plugin-image'
import Link from 'components/Link'
import { IconEllipsis } from '@posthog/icons'
import { CallToAction } from 'components/CallToAction'

const librariesData = {
web: {
name: 'Web',
description: 'Use autocapture to collect client-side events without any special instrumentation.',
items: [
{
name: 'JavaScript',
url: '/docs/libraries/js',
icon: (
<CloudinaryImage
src="https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/js.svg"
alt="JavaScript"
/>
),
},
{
name: 'Next.js',
url: '/docs/libraries/next-js',
icon: (
<CloudinaryImage
src="https://res.cloudinary.com/dmukukwp6/image/upload/next_js_fa0f2983d8.svg"
alt="Next.js"
/>
),
},
{
name: 'React',
url: '/docs/libraries/react',
icon: (
<CloudinaryImage
src="https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/react.svg"
alt="React"
/>
),
},
],
},
mobile: {
name: 'Mobile',
description: 'Send custom events and identify users. Record mobile sessions and use feature flags.',
Copy link
Member

Choose a reason for hiding this comment

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

Missing Flutter here now since the desc. Is more generic and not only about replay

items: [
{
name: 'Android',
url: '/docs/libraries/android',
icon: (
<CloudinaryImage
src="https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/android.svg"
alt="Android"
/>
),
},
{
name: 'iOS',
url: '/docs/libraries/ios',
icon: (
<CloudinaryImage
src="https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/ios.svg"
className="dark:invert"
alt="iOS"
/>
),
},
{
name: 'React Native',
url: '/docs/libraries/react-native',
icon: (
<CloudinaryImage
src="https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/react.svg"
alt="React Native"
/>
),
},
],
},
}

export default function MobileLibraries() {
return (
<section className="max-w-7xl mx-auto px-5 sm:pt-8 mb-12 sm:mb-20 md:mb-12 lg:mb-20 xl:-mb-24">
<div className="sm:grid grid-cols-12">
<div className="col-span-5">
<div className="rotate-3">
<CloudinaryImage
src="https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/src/components/Home/images/hogflix-mobile.png"
alt="Hogflix mobile"
placeholder="blurred"
style={{ maxHeight: '50%', width: 'auto' }} // Ensures aspect ratio is maintained
/>
</div>
</div>

<div className="col-span-7 -mt-48 sm:mt-0 relative z-10 after:absolute after:left-0 after:w-full after:-top-60 after:h-60 after:bg-gradient-to-b after:from-tan/0 after:via-tan/75 after:to-tan dark:after:from-dark/0 dark:after:via-bg/75 dark:after:to-dark sm:overflow-hidden bg-tan dark:bg-dark">
<h3 className="text-5xl xl:text-6xl text-center sm:text-left mb-8">
Replay for <span className="text-blue">web</span> and{' '}
<span className="text-red dark:text-yellow">mobile</span>
</h3>

<div className="flex flex-col gap-4 mb-4">
{Object.values(librariesData).map((category) => (
<div key={category.name}>
<h4 className="mb-0">{category.name}</h4>
<p className="opacity-70 mb-4">{category.description}</p>
<ul className="flex gap-3 sm:gap-4 list-none p-0 pb-2 m-0">
{category.items.map((item) => (
<li key={item.name}>
<Link
href={item.url}
className="flex flex-col gap-2 items-center p-0 relative transition-all hover:scale-[1.02] hover:top-[-.5px] active:scale-[.98] active:top-[.5px]"
>
<figure className="size-14 bg-accent dark:bg-accent-dark p-3 rounded-md text-center flex items-center justify-center text-primary/50 dark:text-primary-dark/50">
{item.icon}
</figure>
<span className="text-red dark:text-yellow font-semibold text-sm">
{item.name}
</span>
</Link>
</li>
))}
</ul>
</div>
))}
</div>
<CallToAction href="/docs/libraries" size="sm" type="secondary">
Browse all libraries
</CallToAction>
</div>
</div>
</section>
)
}
4 changes: 0 additions & 4 deletions src/navs/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2331,10 +2331,6 @@ export const docsMenu = {
url: '/docs/session-replay/mobile',
icon: 'IconPhone',
color: 'blue',
badge: {
title: 'Beta',
className: 'uppercase !bg-blue/10 !text-blue !dark:text-white !dark:bg-blue/50',
},
},
{
name: 'Troubleshooting and FAQs',
Expand Down