Skip to content

Commit

Permalink
add google analytics
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsladerman
jsladerman committed Oct 24, 2024
1 parent c159a3d commit f28aabc
Show file tree
Hide file tree
Showing 6 changed files with 167 additions and 79 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"@loomhq/loom-embed": "1.5.0",
"@markdoc/markdoc": "0.4.0",
"@markdoc/next.js": "0.2.2",
"@next/third-parties": "15.0.1",
"@open-draft/until": "2.1.0",
"@pluralsh/design-system": "3.54.0",
"@react-types/shared": "3.22.0",
Expand Down
2 changes: 2 additions & 0 deletions pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { type AppProps } from 'next/app'
import NextLink from 'next/link'
import { useRouter } from 'next/router'

import { GoogleTagManager } from '@next/third-parties/google'
import { MarkdocContextProvider } from '@pluralsh/design-system/dist/markdoc'
import { ThemeProvider as StyledThemeProvider } from 'styled-components'
import { SWRConfig } from 'swr'
Expand Down Expand Up @@ -82,6 +83,7 @@ function App({ Component, pageProps }: MyAppProps) {
}
const app = (
<>
<GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GA_ID ?? ''} />
<CssBaseline />
<PluralGlobalStyle />
<GlobalStyles />
Expand Down
26 changes: 11 additions & 15 deletions pages/_document.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,23 +49,19 @@ class MyDocument extends Document {
type="text/javascript"
data-widget-position="bottom-right"
/>
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {ad_storage:'denied', analytics_storage:'denied'});
gtag('set', 'ads_data_redaction', true);
gtag('set', 'url_passthrough', true);
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');`,
}}
/>
</Head>
<body>
{/* <!-- Google Tag Manager (noscript) --> */}
<noscript>
<iframe
title="Google Tag Manager"
src={`https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GA_ID}`}
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
/>
</noscript>
{/* <!-- End Google Tag Manager (noscript) --> */}
<Main />
<NextScript />
</body>
Expand Down
147 changes: 83 additions & 64 deletions pages/kubecon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import styled from 'styled-components'

import { TextColumnWithIcon } from '@src/components/custom-page/MultiColumnText'
import { FooterVariant } from '@src/components/FooterFull'
import { KubeconHeader } from '@src/components/Kubecon'
import { KubeconHeader, handleDownloadICS } from '@src/components/Kubecon'
import { StandardPageWidth } from '@src/components/layout/LayoutHelpers'
import { ImpactCardSection } from '@src/components/page-sections/ImpactCardSection'
import {
Expand All @@ -23,7 +23,7 @@ import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
export default function KubeCon() {
return (
<div className="bg-[#0F1116]">
<div className="relative">
<div className="relative opacity-60 transition-opacity lg:opacity-100">
<div
css={`
position: absolute;
Expand All @@ -36,6 +36,22 @@ export default function KubeCon() {
height: 200px;
`}
/>
<div
css={`
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background: #7075f5;
filter: blur(178px);
width: 150px;
height: 150px;
@media (max-width: 768px) {
display: none;
}
`}
/>
<div
css={`
position: absolute;
Expand All @@ -53,72 +69,76 @@ export default function KubeCon() {
className="absolute left-1/2 top-[400px] -translate-x-1/2"
/>
</div>
<div className="flex flex-col items-center gap-xxlarge py-xxxxxxlarge">
<KubeconHeader />
<div className="flex max-w-3xl flex-col items-center gap-small text-center">
<Hero1>Meet us at KubeCon</Hero1>
<Body1 $color="text-light">
Join Plural at KubeCon North America 2024 in Salt Lake City, UT.
We're excited to showcase our latest solutions that empower
organizations to streamline their Kubernetes deployments and
operations.
</Body1>
</div>
<Button
large
primary
rel="noopener noreferrer"
target="_blank"
as={Link}
href="/contact-sales"
className="mt-medium w-fit"
>
Book a demo
</Button>
</div>
<WhereToFindUsSection>
<div className="flex flex-col items-center">
<div className="flex flex-col items-center py-xlarge text-center">
<OverlineLabel>Where to find us</OverlineLabel>
<Hero2>
Visit our booth —{' '}
<span className="text-text-primary-accent">R23</span>
</Hero2>
<Body1
$color="text-light"
className="mt-small"
>
Booth R23 is near the CNCF project pavilion, across from the game
zone.
<StandardPageWidth>
<div className="flex flex-col items-center gap-xxlarge py-xxxxxxlarge">
<KubeconHeader />
<div className="flex max-w-3xl flex-col items-center gap-small text-center">
<Hero1>Meet us at KubeCon</Hero1>
<Body1 $color="text-light">
Join Plural at KubeCon North America 2024 in Salt Lake City, UT.
We're excited to showcase our latest solutions that empower
organizations to streamline their Kubernetes deployments and
operations.
</Body1>
</div>
<Image
className="w-[500px] rounded-large border border-solid border-[#ffffff99]"
src="/images/kubecon/booths-map.jpg"
alt="Booth map"
width={2366}
height={1432}
/>
<div className="flex flex-col gap-xlarge pb-large pt-xxlarge lg:flex-row">
<TextColumnWithIcon
heading="Experience live demos"
bodyText="See Plural in action and explore our platform's capabilities"
icon="StackRun"
<Button
large
primary
rel="noopener noreferrer"
target="_blank"
as={Link}
href="/contact-sales"
className="mt-medium w-fit"
>
Book a demo
</Button>
</div>
</StandardPageWidth>
<WhereToFindUsSection>
<StandardPageWidth>
<div className="flex flex-col items-center">
<div className="flex flex-col items-center py-xlarge text-center">
<OverlineLabel>Where to find us</OverlineLabel>
<Hero2>
Visit our booth —{' '}
<span className="text-text-primary-accent">R23</span>
</Hero2>
<Body1
$color="text-light"
className="mt-small"
>
Booth R23 is near the CNCF project pavilion, across from the
game zone.
</Body1>
</div>
<Image
className="w-[500px] rounded-large border border-solid border-[#ffffff99]"
src="/images/kubecon/booths-map.jpg"
alt="Booth map"
width={2366}
height={1432}
/>
<div className="pt-xxlarge">
<div className="flex flex-col gap-xlarge pb-large pt-xxlarge lg:flex-row">
<TextColumnWithIcon
heading="Experience live demos"
bodyText="See Plural in action and explore our platform's capabilities"
icon="StackRun"
/>
<div className="pt-xxlarge">
<TextColumnWithIcon
heading="Meet our experts"
bodyText="Chat with our team and Founders, about your Kubernetes management challenges — and how we can help!"
icon="People"
/>
</div>
<TextColumnWithIcon
heading="Meet our experts"
bodyText="Chat with our team and Founders, about your Kubernetes management challenges — and how we can help!"
icon="People"
heading="Exclusive swag"
bodyText="Swing by and pick up Plural swag we made exclusively for KubeCon 2024"
icon="MagicWand"
/>
</div>
<TextColumnWithIcon
heading="Exclusive swag"
bodyText="Swing by and pick up Plural swag we made exclusively for KubeCon 2024"
icon="MagicWand"
/>
</div>
</div>
</StandardPageWidth>
</WhereToFindUsSection>
<StandardPageWidth>
<div className="flex w-full flex-col items-center py-xxxxlarge">
Expand Down Expand Up @@ -168,10 +188,9 @@ export default function KubeCon() {
<Button
large
primary
as={Link}
href="#"
className="w-fit"
startIcon={<CalendarIcon />}
onClick={handleDownloadICS}
>
Add session to calendar
</Button>
Expand Down Expand Up @@ -273,7 +292,7 @@ export const getStaticProps = async () => {
})
}

const WhereToFindUsSection = styled(StandardPageWidth)(({ theme }) => {
const WhereToFindUsSection = styled.div(({ theme }) => {
const bgGradient = `linear-gradient(180deg, #0E1015 0%, rgba(14, 16, 21, 0.0) 50%, #0E1015 100%),
radial-gradient(81.85% 81.85% at 50% 18.15%, #0E1015 0%, rgba(14, 16, 21, 0.55) 100%)`

Expand Down
50 changes: 50 additions & 0 deletions src/components/Kubecon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,53 @@ export function KubeconHeader() {
</svg>
)
}

export const handleDownloadICS = () => {
const icsContent = `
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Plural//EN
BEGIN:VTIMEZONE
TZID:America/Denver
LAST-MODIFIED:20240422T053451Z
TZURL:https://www.tzurl.org/zoneinfo-outlook/America/Denver
X-LIC-LOCATION:America/Denver
BEGIN:DAYLIGHT
TZNAME:MDT
TZOFFSETFROM:-0700
TZOFFSETTO:-0600
DTSTART:19700308T020000
RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=2SU
END:DAYLIGHT
BEGIN:STANDARD
TZNAME:MST
TZOFFSETFROM:-0600
TZOFFSETTO:-0700
DTSTART:19701101T020000
RRULE:FREQ=YEARLY;BYMONTH=11;BYDAY=1SU
END:STANDARD
END:VTIMEZONE
BEGIN:VEVENT
DTSTAMP:20241024T194031Z
UID:1729798817923
DTSTART;TZID=America/Denver:20241115T165500
DTEND;TZID=America/Denver:20241115T173000
SUMMARY:Navigating the Future: Exploring the Latest in Kubernetes Dashboard Development - Marcin Maciaszczyk & Sebastian Florek\\, Plural
URL:https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/program/schedule/
DESCRIPTION:Join us for an insightful presentation on the latest updates from the Kubernetes SIG-UI\\, focusing on the evolution of the Kubernetes Dashboard project. Dive into a comprehensive overview of key changes\\, enhancements\\, and advancements\\, including a detailed exploration of the project's new architecture. Gain valuable insights into how these developments shape the future of Kubernetes management and user experience. Whether you're a seasoned Kubernetes user or new to the ecosystem\\, this presentation promises to provide valuable perspectives on the cutting-edge developments in Kubernetes Dashboard.
LOCATION:Salt Palace | Level 3| 355 B
END:VEVENT
END:VCALENDAR
`.trim()

const blob = new Blob([icsContent], { type: 'text/calendar' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')

a.href = url
a.download = 'kubecon-session.ics'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
}
20 changes: 20 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3881,6 +3881,18 @@ __metadata:
languageName: node
linkType: hard

"@next/third-parties@npm:15.0.1":
version: 15.0.1
resolution: "@next/third-parties@npm:15.0.1"
dependencies:
third-party-capital: 1.0.20
peerDependencies:
next: ^13.0.0 || ^14.0.0 || ^15.0.0
react: ^18.2.0 || 19.0.0-rc-65a56d0e-20241020
checksum: 1b67cef2c61b91e4902a0c4644a143dda66ef29e3b344a825306dacc26b67dd1df351fc22c7c64fa0ef237a438fe1578ae9d86e09a95cc7b37f6424dbc511294
languageName: node
linkType: hard

"@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
version: 5.1.1-v1
resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
Expand Down Expand Up @@ -13742,6 +13754,7 @@ __metadata:
"@markdoc/markdoc": 0.4.0
"@markdoc/next.js": 0.2.2
"@next/bundle-analyzer": 13.4.12
"@next/third-parties": 15.0.1
"@open-draft/until": 2.1.0
"@pluralsh/design-system": 3.54.0
"@pluralsh/eslint-config-typescript": 2.5.183
Expand Down Expand Up @@ -16289,6 +16302,13 @@ __metadata:
languageName: node
linkType: hard

"third-party-capital@npm:1.0.20":
version: 1.0.20
resolution: "third-party-capital@npm:1.0.20"
checksum: ef5eae00bdb82b538b9f628a011fc294cd6f4bafdbb46d88f3d1a72e8c3b9e2cc2a547fdb62bc16bdd847e9da3dac2df676b154c64914f6c90ea15aac6ce0a6a
languageName: node
linkType: hard

"throttle-debounce@npm:^3.0.1":
version: 3.0.1
resolution: "throttle-debounce@npm:3.0.1"
Expand Down

0 comments on commit f28aabc

Please sign in to comment.