Feat/track (#177)

* add removed head * Add amplitude and hotjar, keep google and simple analytics just in case * Add amplitude tracker * delete link tag and unnecessary css file from navigation files to prevent duplicated head
virto-network · Sep 3, 2024 · 1717569 · 1717569
1 parent d9d0a2b
commit 1717569
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 70 deletions.
diff --git a/_includes/nav.liquid b/_includes/nav.liquid
@@ -1,3 +1,5 @@
+<link rel="stylesheet" href="/css/common.css">
+<link rel="stylesheet" href="/css/layout.css">
 <nav id="nav" class="top-nav" aria-label="Principal">
 	<div class="max row bold">
 		<a class="menu-item" href="/" id="virto-logo" role="menuitem" aria-label="Inicio">

diff --git a/_includes/navlanding.liquid b/_includes/navlanding.liquid
@@ -1,3 +1,5 @@
+<link rel="stylesheet" href="/css/common.css">
+<link rel="stylesheet" href="/css/layout.css">
 <nav id="nav" class="top-nav" aria-label="Principal">
 	<div class="max row bold">
 		<a {% if page.data.route == "landing-a"%}current{%endif%}" href="/" id="virto-logo" role="menuitem" aria-label="Inicio">

diff --git a/_layouts/landing.liquid b/_layouts/landing.liquid
@@ -15,8 +15,46 @@
 	<link rel="stylesheet" href="/css/index.css">
 	<link rel="stylesheet" href="/css/layout.css">
 	<link rel="stylesheet" href="/css/variables.css">
-	<script defer data-domain="virto.network" src="https://plausible.io/js/script.js"></script>
-
+	<script>
+	// Google Tag Manager
+	(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','GTM-W8MP4KWQ'); 
+	</script>
+	<script>
+	// Facebook Pixel
+	!function(f,b,e,v,n,t,s)
+	{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+	n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+	if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+	n.queue=[];t=b.createElement(e);t.async=!0;
+	t.src=v;s=b.getElementsByTagName(e)[0];
+	s.parentNode.insertBefore(t,s)}(window, document,'script',
+	'https://connect.facebook.net/en_US/fbevents.js');
+	fbq('init', '959806772386614');
+	fbq('track', 'PageView');
+	</script>
+	<noscript><img height="1" width="1" style="display:none"
+	src="https://www.facebook.com/tr?id=974289180798824&ev=PageView&noscript=1"
+	/></noscript>
+	<script>
+	// Hotjar
+    (function(h,o,t,j,a,r){
+        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+        h._hjSettings={hjid:4973006,hjsv:6};
+        a=o.getElementsByTagName('head')[0];
+        r=o.createElement('script');r.async=1;
+        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+        a.appendChild(r);
+    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+	</script>
+	<!-- Amplitude -->
+    <script src="https://cdn.amplitude.com/libs/analytics-browser-2.7.1-min.js.gz"></script><script src="https://cdn.amplitude.com/libs/plugin-session-replay-browser-1.2.0-min.js.gz"></script>
+    <script src="https://cdn.amplitude.com/libs/plugin-autocapture-browser-0.9.0-min.js.gz"></script>
+    <script>window.amplitude.init('88119dfbd18136240ad8303dc877b6a8');window.amplitude.add(window.sessionReplay.plugin({sampleRate: 1}));window.amplitude.add(window.amplitudeAutocapturePlugin.plugin());</script>
+	<!-- Simple Analytics -->
 	<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
 	<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade"/></noscript>
 	<meta name="sa-verify" content="fvirtonetwowv0n" />
@@ -42,17 +80,13 @@
 			}
   		});
 	}, { threshold: 0.2 }); 
-
 	const animatedElements = document.querySelectorAll('.animated');
-
 	animatedElements.forEach(element => {
 		observer.observe(element);
 	});
-
 		document.fonts.ready.then((fontFaceSet) => {
 			document.body.classList.remove('hidden');
 		})
 	</script>
 </body>
-
-</html>
+</html>
diff --git a/landings/a/index.liquid b/landings/a/index.liquid
@@ -132,38 +132,37 @@ ul li, .auto-grid li { display: flex; align-items: center; }
 {% endfor %}
 
 <script>
-document.addEventListener('DOMContentLoaded', function() {
+window.document.onload = () => {
     let url = new URL(window.location.href);
     url.searchParams.set('b', 'b-one');
     window.history.pushState({}, '', url);
+    
+    window.amplitude.track(`view:landing:a`);
 
     let cta = document.querySelectorAll(".track-cta");
     cta.forEach((c) => {
-        c.addEventListener('click', (event) => {
-            event.preventDefault();
+        c.addEventListener('click', () => {
             let searchParams = new URL(window.location.href).searchParams;
+            window.amplitude.track(`landing:a:click-apply`);
             let url = `https://waitlist.virto.network/?b=${searchParams.get('b')}`;
             window.location.href = url;
         });
     });
 
     const $ = document.querySelector.bind(document);
     const $$ = document.querySelectorAll.bind(document);
-    
     const addViewedClass = ([e], ob) => {
         e.target.classList.add('viewed');
         ob.unobserve(e.target);
     };
-    
     const whenVisible = (elements, fn, opts) => {
         const ob = new IntersectionObserver(fn, opts);
         $$(elements).forEach(e => ob.observe(e));
     };
-    
     const makeSticky = ([br]) =>
         br.target.nextElementSibling.classList.toggle('fixed', br.intersectionRatio === 1);
 
     whenVisible('main>section', addViewedClass, { threshold: 0.2 });
     whenVisible('.sticky-hack', makeSticky, { threshold: [0, 1] });
-});
+};
 </script>
diff --git a/landings/b/index.liquid b/landings/b/index.liquid
@@ -141,35 +141,37 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 {% endfor %}
 
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-let url = new URL(window.location.href);
-url.searchParams.set('b', 'b-two');
-window.history.pushState({}, '', url);
-
-let cta = document.querySelectorAll(".track-cta");
-cta.forEach((c) => {
-    c.addEventListener('click', (event) => {
-        event.preventDefault();
-        let searchParams = new URL(window.location.href).searchParams;
-        let url = `https://waitlist.virto.network/?b=${searchParams.get('b')}`;
-        window.location.href = url;
+window.document.onload = () => {
+    let url = new URL(window.location.href);
+    url.searchParams.set('b', 'b-two');
+    window.history.pushState({}, '', url);
+    
+    window.amplitude.track(`view:landing:b`);
+
+    let cta = document.querySelectorAll(".track-cta");
+    cta.forEach((c) => {
+        c.addEventListener('click', () => {
+            let searchParams = new URL(window.location.href).searchParams;
+            window.amplitude.track(`landing:b:click-apply`);
+            let url = `https://waitlist.virto.network/?b=${searchParams.get('b')}`;
+            window.location.href = url;
+        });
     });
-});
 
-const $ = document.querySelector.bind(document);
-const $$ = document.querySelectorAll.bind(document);
-const addViewedClass = ([e], ob) => {
-    e.target.classList.add('viewed');
-    ob.unobserve(e.target);
+    const $ = document.querySelector.bind(document);
+    const $$ = document.querySelectorAll.bind(document);
+    const addViewedClass = ([e], ob) => {
+        e.target.classList.add('viewed');
+        ob.unobserve(e.target);
+    };
+    const whenVisible = (elements, fn, opts) => {
+        const ob = new IntersectionObserver(fn, opts);
+        $$(elements).forEach(e => ob.observe(e));
+    };
+    const makeSticky = ([br]) =>
+        br.target.nextElementSibling.classList.toggle('fixed', br.intersectionRatio === 1);
+
+    whenVisible('main>section', addViewedClass, { threshold: 0.2 });
+    whenVisible('.sticky-hack', makeSticky, { threshold: [0, 1] });
 };
-const whenVisible = (elements, fn, opts) => {
-    const ob = new IntersectionObserver(fn, opts);
-    $$(elements).forEach(e => ob.observe(e));
-};
-const makeSticky = ([br]) =>
-    br.target.nextElementSibling.classList.toggle('fixed', br.intersectionRatio === 1);
-
-whenVisible('main>section', addViewedClass, { threshold: 0.2 });
-whenVisible('.sticky-hack', makeSticky, { threshold: [0, 1] });
-});
 </script>
diff --git a/landings/c/index.liquid b/landings/c/index.liquid
@@ -138,35 +138,37 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 {% endfor %}
 
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-let url = new URL(window.location.href);
-url.searchParams.set('b', 'b-three');
-window.history.pushState({}, '', url);
-
-let cta = document.querySelectorAll(".track-cta");
-cta.forEach((c) => {
-    c.addEventListener('click', (event) => {
-        event.preventDefault();
-        let searchParams = new URL(window.location.href).searchParams;
-        let url = `https://waitlist.virto.network/?b=${searchParams.get('b')}`;
-        window.location.href = url;
+window.document.onload = () => {
+    let url = new URL(window.location.href);
+    url.searchParams.set('b', 'b-three');
+    window.history.pushState({}, '', url);
+    
+    window.amplitude.track(`view:landing:c`);
+
+    let cta = document.querySelectorAll(".track-cta");
+    cta.forEach((c) => {
+        c.addEventListener('click', () => {
+            let searchParams = new URL(window.location.href).searchParams;
+            window.amplitude.track(`landing:c:click-apply`);
+            let url = `https://waitlist.virto.network/?b=${searchParams.get('b')}`;
+            window.location.href = url;
+        });
     });
-});
 
-const $ = document.querySelector.bind(document);
- $$ = document.querySelectorAll.bind(document);
-const addViewedClass = ([e], ob) => {
-    e.target.classList.add('viewed');
-    ob.unobserve(e.target);
+    const $ = document.querySelector.bind(document);
+    const $$ = document.querySelectorAll.bind(document);
+    const addViewedClass = ([e], ob) => {
+        e.target.classList.add('viewed');
+        ob.unobserve(e.target);
+    };
+    const whenVisible = (elements, fn, opts) => {
+        const ob = new IntersectionObserver(fn, opts);
+        $$(elements).forEach(e => ob.observe(e));
+    };
+    const makeSticky = ([br]) =>
+        br.target.nextElementSibling.classList.toggle('fixed', br.intersectionRatio === 1);
+
+    whenVisible('main>section', addViewedClass, { threshold: 0.2 });
+    whenVisible('.sticky-hack', makeSticky, { threshold: [0, 1] });
 };
-const whenVisible = (elements, fn, opts) => {
-const ob = new IntersectionObserver(fn, opts);
-$$(elements).forEach(e => ob.observe(e));
-};
-const makeSticky = ([br]) =>
-	br.target.nextElementSibling.classList.toggle('fixed', br.intersectionRatio === 1);
-
-whenVisible('main>section', addViewedClass, { threshold: 0.2 });
-whenVisible('.sticky-hack', makeSticky, { threshold: [0, 1] });
-});
 </script>