From 6250dcc04617d595fa687bfb410bc1c3b5aa1960 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ail=C3=A9n=20Grimaldi?=
 <63558201+ail3ngrimaldi@users.noreply.github.com>
Date: Tue, 10 Sep 2024 10:41:25 -0300
Subject: [PATCH] Fixed code that ensures that the event gets to amplitude
 (#181)

* Fixed code that ensures that the event gets to amplitude

* Fix track event for mobile. Add different events for superior and inferior cta
---
 landings/a/index.liquid | 54 +++++++++++++++++++------------
 landings/b/index.liquid | 70 ++++++++++++++++++++++++-----------------
 landings/c/index.liquid | 50 ++++++++++++++++++-----------
 3 files changed, 108 insertions(+), 66 deletions(-)

diff --git a/landings/a/index.liquid b/landings/a/index.liquid
index 0f3f4be..10195da 100644
--- a/landings/a/index.liquid
+++ b/landings/a/index.liquid
@@ -7,6 +7,7 @@ data:
 ---
 
 <style>
+main { overflow: hidden; }
 
 p { --font-size-paragraph: 1.3em; }
 
@@ -51,13 +52,14 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 2em; }
 @media only screen and (max-width: 767px) {
     article div { width: 90%; }
     .text-section { max-width: 85%; }
+	.column { gap: .5em; }
 }
 
 @media only screen and (max-width: 1295px) {
     .column { order: -1; width: fit-content(300px); }
 }
 
-.column { max-width: 700px; gap: 1em;}
+.column { max-width: 700px; }
 
 </style>
 
@@ -69,7 +71,7 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 2em; }
 				<h1>{{ landing_a.title }}</h1>
 				<p>{{ landing_a.paragraph_one }}</p>
 				<p>{{ landing_a.paragraph_two }}</p>
-				<a class="track-cta button" href="https://waitlist.virto.network/">{{ landing_a.call_to_action }}</a>
+				<a class="track-superior-cta button" href="https://waitlist.virto.network/">{{ landing_a.call_to_action }}</a>
 			</div>
 			<figure class="logo image main__logo">
 				{% include "w.svg" %}
@@ -131,10 +133,10 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 2em; }
 			<h3 class="bolder">{{ landing_a.eyebrow }}</h3>
 			<h2 class="bolder">{{ landing_a.title }}</h2>
 			<h3 class="bolder">{{ landing_a.paragraph_one  }}</h3>
-			<a class="button" href={{ landing_a.link }} >{{ landing_a.call_to_action }}</a>
+			<a class="track-inferior-cta button" href={{ landing_a.link }} >{{ landing_a.call_to_action }}</a>
 			<ul class="social-media__links">
 			{% for social in landing_a.socials %}
-				<a id={{ social.id }} class="link-to" title={{ social.title }} href={{ social.link }}>
+				<a id={{ social.id }} class="link-to" title={{ social.title }}>
 					{% include social.svg %}
 				</a>
 			{% endfor %}
@@ -154,28 +156,40 @@ document.addEventListener('DOMContentLoaded', function() {
 		event.preventDefault();
 		let redirectUrl = new URL('https://waitlist.virto.network/');
 		redirectUrl.searchParams.set('b', 'b-one');
-		window.amplitude.track('landing:a:click-apply')
-		window.open(redirectUrl.toString(), '_blank');
+		if (event.currentTarget.classList.contains('track-superior-cta')) {
+        	window.amplitude.track('landing:a:click-superior-cta');
+    	} else if (event.currentTarget.classList.contains('track-inferior-cta')) {
+        	window.amplitude.track('landing:a:click-inferior-cta');
+    	}
+	window.open(redirectUrl.toString(), '_blank');
 	}
-
-	let ctas = document.querySelectorAll('.track-cta');
+	
+	let ctas = document.querySelectorAll('.button');
 	ctas.forEach((cta) => {
 		cta.addEventListener('click', handleCtaClick);
 	});
 
 	let telegram = document.getElementById("telegram");
-    telegram.addEventListener('click', () => {
-		let w = window.open('_blank');
-        w.location = url;
-        window.amplitude.track('landing:a:click-telegram');
-    });
-
-    let whatsapp = document.getElementById("whatsapp");
-    whatsapp.addEventListener('click', () => {
-		let w = window.open('_blank');
-        w.location = url;
-        window.amplitude.track('landing:a:click-whatsapp');
-    });
+	telegram.addEventListener('click', (event) => {
+		event.preventDefault();
+		let redirectUrl = new URL('https://t.me/+573107887042');
+		const newWindow = window.open('_blank');
+		amplitude.track('landing:a:click-telegram')
+		.then(() => {
+			newWindow.location = redirectUrl.toString();
+		})
+	});
+
+	let whatsapp = document.getElementById("whatsapp");
+	whatsapp.addEventListener('click', (event) => {
+		event.preventDefault();
+		let redirectUrl = new URL('https://api.whatsapp.com/send?phone=573107887042');
+		const newWindow = window.open('_blank');
+		amplitude.track('landing:a:click-whatsapp')
+		.then(() => {
+			newWindow.location = redirectUrl.toString();
+		})
+	});
 
     const $ = document.querySelector.bind(document);
     const $$ = document.querySelectorAll.bind(document);
diff --git a/landings/b/index.liquid b/landings/b/index.liquid
index d242e0f..fff582f 100644
--- a/landings/b/index.liquid
+++ b/landings/b/index.liquid
@@ -7,6 +7,7 @@ data:
 ---
 
 <style>
+main { overflow: hidden; }
 
 p { --font-size-paragraph: 1.3em; }
 
@@ -47,12 +48,14 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 @media only screen and (max-width: 767px) {
     article div { width: 90%; }
     .text-section { max-width: 85%; }
+	.column { gap: .5em; }
+
 }
 @media only screen and (max-width: 1490px) {
     .column { order: -1; width: fit-content(300px); }
 }
 
-.column { max-width: 700px; gap: 1em;}
+.column { max-width: 700px; }
 
 </style>
 
@@ -63,7 +66,7 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 			<p class="bolder">{{ landing_b.eyebrow}}</p>
 			<h1>{{ landing_b.title }}</h1>
 			<p>{{ landing_b.paragraph }}</p>
-			<a class="track-cta button" href="https://waitlist.virto.network/">{{ landing_b.call_to_action }}</a>
+			<a class="track-superior-cta button" href="https://waitlist.virto.network/">{{ landing_b.call_to_action }}</a>
 		</div>
 		<figure class="logo image">
 			{% include "agree.svg" %}
@@ -126,10 +129,10 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 			<span>{{ landing_b.title }}</span>
 		</h2>
 		<h3 class="bolder">{{ landing_b.paragraph_one  }}</h3>
-		<a class="button" href={{ landing_b.link }} >{{ landing_b.call_to_action }}</a>
+		<a class="track-inferior-cta button" href={{ landing_b.link }} >{{ landing_b.call_to_action }}</a>
 		<ul class="social-media__links">
 		{% for social in landing_b.socials %}
-			<a id={{ social.id }} class="link-to" title={{ social.title }} href={{ social.link }}>
+			<a id={{ social.id }} class="link-to" title={{ social.title }}>
 				{% include social.svg %}
 			</a>
 		{% endfor %}
@@ -146,32 +149,43 @@ document.addEventListener('DOMContentLoaded', function() {
     window.amplitude.track('view:landing:b');
 
 	function handleCtaClick(event) {
-        event.preventDefault();
-        let redirectUrl = new URL('https://waitlist.virto.network/');
-        redirectUrl.searchParams.set('b', 'b-two');
-        window.amplitude.track('landing:b:click-apply')
-        window.open(redirectUrl.toString(), '_blank');
-    }
-
-    let ctas = document.querySelectorAll('.track-cta');
-    ctas.forEach((cta) => {
-        cta.addEventListener('click', handleCtaClick);
-    });
+		event.preventDefault();
+		let redirectUrl = new URL('https://waitlist.virto.network/');
+		redirectUrl.searchParams.set('b', 'b-two');
+		if (event.currentTarget.classList.contains('track-superior-cta')) {
+        	window.amplitude.track('landing:b:click-superior-cta');
+    	} else if (event.currentTarget.classList.contains('track-inferior-cta')) {
+        	window.amplitude.track('landing:b:click-inferior-cta');
+    	}
+	window.open(redirectUrl.toString(), '_blank');
+	}
+
+	let ctas = document.querySelectorAll('.button');
+	ctas.forEach((cta) => {
+		cta.addEventListener('click', handleCtaClick);
+	});
 
 	let telegram = document.getElementById("telegram");
-    telegram.addEventListener('click', () => {
-		let w = window.open('_blank');
-        w.location = url;
-        window.amplitude.track('landing:b:click-telegram');
-    });
-
-    let whatsapp = document.getElementById("whatsapp");
-    whatsapp.addEventListener('click', () => {
-		let w = window.open('_blank');
-        w.location = url;
-        window.amplitude.track('landing:b:click-whatsapp');
-    });
-
+	telegram.addEventListener('click', (event) => {
+		event.preventDefault();
+		let redirectUrl = new URL('https://t.me/+573107887042');
+		const newWindow = window.open('_blank');
+		amplitude.track('landing:b:click-telegram')
+		.then(() => {
+			newWindow.location = redirectUrl.toString();
+		});
+	});
+
+	let whatsapp = document.getElementById("whatsapp");
+	whatsapp.addEventListener('click', (event) => {
+		event.preventDefault();
+		let redirectUrl = new URL('https://api.whatsapp.com/send?phone=573107887042');
+		const newWindow = window.open('_blank');
+		amplitude.track('landing:b:click-whatsapp')
+		.then(() => {
+			newWindow.location = redirectUrl.toString();
+		});
+	});
 
     const $ = document.querySelector.bind(document);
     const $$ = document.querySelectorAll.bind(document);
diff --git a/landings/c/index.liquid b/landings/c/index.liquid
index 18a2a1e..91f3162 100644
--- a/landings/c/index.liquid
+++ b/landings/c/index.liquid
@@ -7,6 +7,7 @@ data:
 ---
 
 <style>
+main { overflow: hidden; }
 
 p { --font-size-paragraph: 1.3em; }
 .main__logo svg {
@@ -46,6 +47,7 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 @media only screen and (max-width: 767px) {
     article div { width: 90%; }
     .text-section { max-width: 85%; }
+	.column { gap: .5em; }
 }
 @media only screen and (max-width: 1490px) {
     .column { order: -1; width: fit-content(300px); }
@@ -122,12 +124,12 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 		<h2 class="bolder">
 			<span>{{ landing_c.title }}</span>
 		</h2>
-		<a class="button" href={{ landing_c.link }}>
+		<a class="track-cta button" href={{ landing_c.link }}>
 			{{ landing_c.call_to_action }}
 		</a>
 		<ul class="social-media__links">
 		{% for social in landing_c.socials %}
-			<a id={{ social.id }} class="link-to" title={{ social.title }} href={{ social.link }}>
+			<a id={{ social.id }} class="link-to" title={{ social.title }}>
 				{% include social.svg %}
 			</a>
 		{% endfor %}
@@ -147,28 +149,40 @@ document.addEventListener('DOMContentLoaded', function() {
 		event.preventDefault();
 		let redirectUrl = new URL('https://waitlist.virto.network/');
 		redirectUrl.searchParams.set('b', 'b-three');
-		window.amplitude.track('landing:c:click-apply')
-		window.open(redirectUrl.toString(), '_blank');
+		if (event.currentTarget.classList.contains('track-superior-cta')) {
+        	window.amplitude.track('landing:c:click-superior-cta');
+    	} else if (event.currentTarget.classList.contains('track-inferior-cta')) {
+        	window.amplitude.track('landing:c:click-inferior-cta');
+    	}
+	window.open(redirectUrl.toString(), '_blank');
 	}
-
-	let ctas = document.querySelectorAll('.track-cta');
+	
+	let ctas = document.querySelectorAll('.button');
 	ctas.forEach((cta) => {
 		cta.addEventListener('click', handleCtaClick);
 	});
 
 	let telegram = document.getElementById("telegram");
-    telegram.addEventListener('click', () => {
-		let w = window.open('_blank');
-        w.location = url;
-        window.amplitude.track('landing:c:click-telegram');
-    });
-
-    let whatsapp = document.getElementById("whatsapp");
-    whatsapp.addEventListener('click', () => {
-		let w = window.open('_blank');
-        w.location = url;
-        window.amplitude.track('landing:c:click-whatsapp');
-    });
+	telegram.addEventListener('click', (event) => {
+		event.preventDefault();
+		let redirectUrl = new URL('https://t.me/+573107887042');
+		const newWindow = window.open('_blank');
+		amplitude.track('landing:c:click-telegram')
+		.then(() => {
+			newWindow.location = redirectUrl.toString();
+		})
+	});
+
+	let whatsapp = document.getElementById("whatsapp");
+	whatsapp.addEventListener('click', (event) => {
+		event.preventDefault();
+		let redirectUrl = new URL('https://api.whatsapp.com/send?phone=573107887042');
+		const newWindow = window.open('_blank');
+		amplitude.track('landing:c:click-whatsapp')
+		.then(() => {
+			newWindow.location = redirectUrl.toString();
+		})
+	});
 
     const $ = document.querySelector.bind(document);
     const $$ = document.querySelectorAll.bind(document);