Add facebook pixel and amplitude (#119)

* add fb pixel, wouldnt be able to add events because i dont have enough permission as administrator * move script to fix an error, base facebook pixel code ok * add class to identify tracked elements * add amplitude * add trackers to each landing * clean data
virto-network · May 8, 2024 · 52976bf · 52976bf
1 parent 6b30f80
commit 52976bf
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 19 deletions.
diff --git a/_data/landings.yml b/_data/landings.yml
@@ -6,7 +6,6 @@ landing_a:
     - id: section-a
       title: Ahorra<span class="dark-lavender-text"> Dinero y Tiempo </span>con Gestión Eficaz
       paragraph: ¿Frustrado con la burocracia y los procesos lentos?<br> Optimiza la gestión de capital humano y finanzas en tu organización con Virto.
-      href: https://apply.virto.network
       call_to_action: Regístrate e Inicia tu Consulta Gratuita
     - id: section-b
       title: Potencia Tu Operativa con <span class="light-lavender-text">Soluciones Inteligentes</span>
@@ -30,13 +29,11 @@ landing_a:
           - content: Innovación a través de nuestra infraestructura integrada con tecnología Web 3.0.
             icon: ../img/lavender_cube.svg
             alt: cubo
-      href: https://apply.virto.network
       call_to_action: Regístrate e Inicia tu Consulta Gratuita
     - id: section-c
       title: Gestiona Mejor,<br><span class="light-lavender-text">Logra Más</span>
       subtitle: Virto te equipa con herramientas diseñadas para el éxito.
       paragraph: "Imagina gestionar proyectos sin estrés y con total transparencia.<br> Sé parte del cambio:"
-      href: https://apply.virto.network
       call_to_action: Regístrate e Inicia tu Consulta Gratuita
       list:
           - content: Sistemas de pago seguros y eficientes.
@@ -51,7 +48,6 @@ landing_a:
     - id: section-d
       title: Inicia Tu Transformación <span class="dark-green-text">con Virto</span>
       paragraph: "Agenda una cita con el equipo Virto y comienza con una consultoría personalizada.<br><strong>Disfruta de los beneficios: Tres meses gratis y tarifas especiales.</strong>"
-      href: https://apply.virto.network
       call_to_action: Regístrate e Inicia tu Consulta Gratuita
 
 #Landing-b
@@ -60,7 +56,6 @@ landing_b:
       title:  Optimiza <span class="dark-lavender-text"> Tu Gestión Organizacional </span>con DAOs
       question: ¿Quieres mejorar la gestión en tu comunidad con tecnología Web 3.0?
       paragraph: Virto te ofrece herramientas avanzadas para DAOs que transforman la eficiencia y la transparencia.
-      href: https://apply.virto.network
       call_to_action: Agéndate y Obtén tu Consulta Gratuita
     - id: section-b
       title: Innova con <br><span class="light-lavender-text">DAOs y Pagos P2P</span>
@@ -78,12 +73,10 @@ landing_b:
           - content: Chat privados para una comunicación segura.
             icon: ../img/lavender_cube.svg
             alt: cubo
-      href: https://apply.virto.network
       call_to_action: Agéndate y Obtén tu Consulta Gratuita
     - id: section-c
       title: Simplifica la Gobernanza con <br><span class="light-lavender-text">Herramientas Intuitivas</span>
       subtitle: 'Superamos la complejidad de los productos tradicionales con soluciones fáciles de usar que potencian la colaboración:'
-      href: https://apply.virto.network
       call_to_action: Agéndate y Obtén tu Consulta Gratuita
       list:
           - content: Procesos de votación claros y seguros para una gobernanza efectiva.
@@ -98,5 +91,4 @@ landing_b:
     - id: section-d
       title: Da el Salto a la Optimización <span class="dark-green-text">con Virto</span>
       paragraph: Regístrate ahora y agenda una consultoría personalizada de Virto.<br><strong>¡No pierdas la oportunidad de disfrutar de tres meses gratuitos!</strong>
-      href: https://apply.virto.network
       call_to_action: Agéndate y Obtén tu Consulta Gratuita
diff --git a/_layouts/landing.liquid b/_layouts/landing.liquid
@@ -12,13 +12,35 @@
 	<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> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+
+	<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>
-	<!-- Hotjar Tracking Code for Site 4973006 (name missing) -->
+	})(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', '974289180798824');
+	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};
@@ -28,6 +50,12 @@
         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('9ab2a030cea2736ceed71a9cd9c68934');window.amplitude.add(window.sessionReplay.plugin({sampleRate: 1}));window.amplitude.add(window.amplitudeAutocapturePlugin.plugin());</script>
+
 </head>
 
 <body class="hidden">

diff --git a/a/index.liquid b/a/index.liquid
@@ -61,7 +61,7 @@ ul li, .auto-grid li { display: flex; align-items: center; }
 			<p>¡Bienvenido a Virto!</p>
 			<h1>{{ landing_a.title }}</h1>
 			<p>{{ landing_a.paragraph }}</p>
-			<button><a href={{ landing_a.href }}>{{ landing_a.call_to_action }}</a></button>
+			<button><a class="track-cta">{{ landing_a.call_to_action }}</a></button>
 		</div>
 		<figure class="arrow-right">
 				{% include "arrow_right.svg" %}
@@ -91,7 +91,7 @@ ul li, .auto-grid li { display: flex; align-items: center; }
 				</li>
             {% endfor %}
             </ul>
-			<a href={{ landing_a.href }} class="bold light-lavender-text center-arrow">{{ landing_a.call_to_action }}
+			<a class="track-cta bold light-lavender-text center-arrow">{{ landing_a.call_to_action }}
 				<figure class="link-arrow light-lavender-text">
 					{% include "see_more.svg" %}
 				</figure>
@@ -114,7 +114,7 @@ ul li, .auto-grid li { display: flex; align-items: center; }
                     </li>
                 {% endfor %}
             </ul>
-			<a href={{ landing_a.href }} class="bold light-lavender-text center-arrow">{{ landing_a.call_to_action }}
+			<a class="track-cta bold light-lavender-text center-arrow">{{ landing_a.call_to_action }}
 				<figure class="link-arrow light-lavender-text">
 					{% include "see_more.svg" %}
 				</figure>
@@ -142,7 +142,7 @@ ul li, .auto-grid li { display: flex; align-items: center; }
 		<div class="text-section">
 			<h3 class="dark-olive-text">¡Aprovecha esta oportunidad única!</h3>
 			<p class="dark-olive-text">{{ landing_a.paragraph }}</p>
-			<a class="dark-olive-text center-arrow" href={{ landing_a.href }}>{{ landing_a.call_to_action }}
+			<a class="track-cta dark-olive-text center-arrow">{{ landing_a.call_to_action }}
 			<figure class="link-arrow">{% include "see_more.svg" %}</figure>
 			</a>
 		</div>
@@ -154,6 +154,15 @@ ul li, .auto-grid li { display: flex; align-items: center; }
 
 
 <script>
+	window.amplitude.track(`view:landing:a`);
+
+	let cta = document.querySelector(".track-cta");
+		cta.addEventListener('click', () => {
+			let searchParams = new URL(window.location.href);
+			window.amplitude.track(`landing:a:click-apply`);
+			window.open(`https://apply.virto.network${searchParams.search}`, '_blank');
+	});
+
 const $ = document.querySelector.bind(document),
 	$$ = document.querySelectorAll.bind(document);
 const addViewedClass = ([e], ob) => {

diff --git a/b/index.liquid b/b/index.liquid
@@ -61,7 +61,7 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 			<h1>{{ landing_b.title }}</h1>
 			<p>{{ landing_b.question }}</p>
 			<p>{{ landing_b.paragraph }}</p>
-			<button><a href={{ landing_b.href }}>{{ landing_b.call_to_action }}</a></button>
+			<button><a class="track-cta">{{ landing_b.call_to_action }}</a></button>
 		</div>
 		<figure class="arrow-right">
 				{% include "arrow_right.svg" %}
@@ -91,7 +91,7 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 				</li>
             {% endfor %}
             </ul>
-			<a href={{ landing_b.href }} class="bold light-lavender-text center-arrow">{{ landing_b.call_to_action }}
+			<a class="track-cta bold light-lavender-text center-arrow">{{ landing_b.call_to_action }}
 				<figure class="link-arrow light-lavender-text">
 					{% include "see_more.svg" %}
 				</figure>
@@ -113,7 +113,7 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
                     </li>
                 {% endfor %}
             </ul>
-			<a href={{ landing_b.href }} class="bold light-lavender-text center-arrow">{{ landing_b.call_to_action }}
+			<a class="track-cta bold light-lavender-text center-arrow">{{ landing_b.call_to_action }}
 				<figure class="link-arrow light-lavender-text">
 					{% include "see_more.svg" %}
 				</figure>
@@ -141,7 +141,7 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 		<div class="text-section">
 			<h3 class="dark-olive-text">Transforma tu organización con facilidad.</h3>
 			<p class="dark-olive-text">{{ landing_b.paragraph }}</p>
-			<a class="dark-olive-text center-arrow" href={{ landing_b.href }}>{{ landing_b.call_to_action }}
+			<a class="track-cta dark-olive-text center-arrow" >{{ landing_b.call_to_action }}
 			<figure class="link-arrow">{% include "see_more.svg" %}</figure>
 			</a>
 		</div>
@@ -153,6 +153,15 @@ ul li, .auto-grid li { display: flex; align-items: center; gap: 1.75em; }
 
 
 <script>
+window.amplitude.track(`view:landing:b`);
+
+let cta = document.querySelector(".track-cta");
+		cta.addEventListener('click', () => {
+			let searchParams = new URL(window.location.href);
+			window.amplitude.track(`landing:b:click-apply`);
+			window.open(`https://apply.virto.network${searchParams.search}`, '_blank');
+	});
+
 const $ = document.querySelector.bind(document),
 	$$ = document.querySelectorAll.bind(document);
 const addViewedClass = ([e], ob) => {