add google analytics

pluralsh · Oct 24, 2024 · 57f1c31 · 57f1c31
1 parent c159a3d
commit 57f1c31
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 19 deletions.
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -41,6 +41,17 @@ class MyDocument extends Document {
             rel="stylesheet"
             href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"
           />
+          {/* <!-- Google Tag Manager --> */}
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `(function(w,d,s,l,i){w[l]=w[l]||[];
+                w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
+                var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
+                j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f)
+                ;})(window,document,'script','dataLayer','${process.env.NEXT_PUBLIC_GA_ID}');`,
+            }}
+          />
+          {/* <!-- End Google Tag Manager --> */}
           <script
             id="Cookiebot"
             src="https://consent.cookiebot.com/uc.js"
@@ -49,23 +60,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>

diff --git a/pages/kubecon.tsx b/pages/kubecon.tsx
@@ -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 {
@@ -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;
@@ -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;
@@ -168,10 +184,9 @@ export default function KubeCon() {
               <Button
                 large
                 primary
-                as={Link}
-                href="#"
                 className="w-fit"
                 startIcon={<CalendarIcon />}
+                onClick={handleDownloadICS}
               >
                 Add session to calendar
               </Button>

diff --git a/src/components/Kubecon.tsx b/src/components/Kubecon.tsx
@@ -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)
+}