feat: add tracking events to website (#798)

meetalva · May 20, 2019 · 82962f3 · 82962f3 · marionebl · May 20, 2019
1 parent 9e4baa3
commit 82962f3
Showing 1 changed file with 54 additions and 6 deletions.
diff --git a/packages/site/src/site.tsx b/packages/site/src/site.tsx
@@ -147,7 +147,15 @@ const Page: React.StatelessComponent<void> = (): JSX.Element => {
 						target="_blank"
 						rel="noopener"
 					>
-						<D.Link color={D.Color.Violet}>
+						<D.Link
+							color={D.Color.Violet}
+							onClick={() =>
+								ReactGA.event({
+									category: 'interest',
+									action: 'Learn how to prototype with code components'
+								})
+							}
+						>
 							Learn how to prototype with code components
 						</D.Link>
 					</a>
@@ -172,6 +180,12 @@ const Page: React.StatelessComponent<void> = (): JSX.Element => {
 						style={{ textDecoration: 'none' }}
 						target="_blank"
 						rel="noopener"
+						onClick={() =>
+							ReactGA.event({
+								category: 'interest',
+								action: 'Learn how to integrate your designs'
+							})
+						}
 					>
 						<D.Link color={D.Color.Violet}>Learn how to integrate your designs</D.Link>
 					</a>
@@ -195,6 +209,12 @@ const Page: React.StatelessComponent<void> = (): JSX.Element => {
 						style={{ textDecoration: 'none' }}
 						target="_blank"
 						rel="noopener"
+						onClick={() =>
+							ReactGA.event({
+								category: 'interest',
+								action: 'Learn how to work with interactions'
+							})
+						}
 					>
 						<D.Link color={D.Color.Violet}>Learn how to work with interactions</D.Link>
 					</a>
@@ -207,7 +227,15 @@ const Page: React.StatelessComponent<void> = (): JSX.Element => {
 				image="https://media.meetalva.io/background.jpg"
 				headline="Our mission is to enable designers and engineers to build better products together. Without friction."
 			>
-				<div style={{ padding: '56.25% 0 0 0', position: 'relative' }}>
+				<div
+					style={{ padding: '56.25% 0 0 0', position: 'relative' }}
+					onClick={() =>
+						ReactGA.event({
+							category: 'interest',
+							action: 'Watch video'
+						})
+					}
+				>
 					<iframe
 						src="https://www.youtube-nocookie.com/embed/gZT13EKfZXg"
 						style={{
@@ -282,6 +310,12 @@ const Page: React.StatelessComponent<void> = (): JSX.Element => {
 									value="Subscribe"
 									name="subscribe"
 									id="mc-embedded-subscribe"
+									onClick={() =>
+										ReactGA.event({
+											category: 'conversion',
+											action: 'Subscribe to Newsletter'
+										})
+									}
 									style={{
 										fontFamily: 'Graphik, Arial',
 										fontSize: '16px',
@@ -316,7 +350,17 @@ const Page: React.StatelessComponent<void> = (): JSX.Element => {
 					</D.Copy>
 				</D.Layout>
 				<D.Space size={D.SpaceSize.L} />
-				<a href="https://github.com/meetalva/alva/" target="_blank" rel="noopener">
+				<a
+					href="https://github.com/meetalva/alva/"
+					target="_blank"
+					rel="noopener"
+					onClick={() =>
+						ReactGA.event({
+							category: 'interest',
+							action: 'Contribute to Alva on Github'
+						})
+					}
+				>
 					<D.Button order={D.ButtonOrder.Secondary} color={D.Color.Violet}>
 						Contribute to Alva on Github
 					</D.Button>
@@ -345,13 +389,17 @@ const Page: React.StatelessComponent<void> = (): JSX.Element => {
 					</D.Copy>
 				</D.Layout>
 				<D.Space size={D.SpaceSize.M} />
-				<a href="./doc/docs/guides/start?guides-enabled=true" target="_blank" rel="noopener">
+				<a
+					href="./doc/docs/guides-design/getting-started.html?guides-design-enabled=true"
+					target="_blank"
+					rel="noopener"
+				>
 					<D.Button
 						order={D.ButtonOrder.Secondary}
 						color={D.Color.White}
 						onClick={() =>
 							ReactGA.event({
-								category: 'conversion',
+								category: 'interest',
 								action: 'Find our guides'
 							})
 						}
@@ -371,7 +419,7 @@ const Page: React.StatelessComponent<void> = (): JSX.Element => {
 					onClick={() =>
 						ReactGA.event({
 							category: 'menu',
-							action: 'S2'
+							action: 'Link to SinnerSchrader'
 						})
 					}
 				/>