Skip to content

Commit

Permalink
Fixed code that ensures that the event gets to amplitude (#181)
Browse files Browse the repository at this point in the history 
* Fixed code that ensures that the event gets to amplitude

* Fix track event for mobile. Add different events for superior and inferior cta
  • Loading branch information
@ail3ngrimaldi
ail3ngrimaldi authored Sep 10, 2024
1 parent b768cba commit 6250dcc
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 66 deletions.
54 changes: 34 additions & 20 deletions landings/a/index.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ data:
---

<style>
main { overflow: hidden; }
p { --font-size-paragraph: 1.3em; }
Expand Down Expand Up @@ -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>

Expand All @@ -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" %}
Expand Down Expand Up @@ -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 %}
Expand All @@ -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);
Expand Down
70 changes: 42 additions & 28 deletions landings/b/index.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ data:
---

<style>
main { overflow: hidden; }
p { --font-size-paragraph: 1.3em; }
Expand Down Expand Up @@ -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>

Expand All @@ -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" %}
Expand Down Expand Up @@ -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 %}
Expand All @@ -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);
Expand Down
50 changes: 32 additions & 18 deletions landings/c/index.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ data:
---

<style>
main { overflow: hidden; }
p { --font-size-paragraph: 1.3em; }
.main__logo svg {
Expand Down Expand Up @@ -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); }
Expand Down Expand Up @@ -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 %}
Expand All @@ -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);
Expand Down

0 comments on commit 6250dcc

Please sign in to comment.