feat(analytics): add custom event tracking across the site

Author: patrickluzdev

.github/workflows/deploy.yml

@@ -37,6 +37,7 @@ jobs:
           NUXT_PUBLIC_EMAILJS_SERVICE_ID: ${{ secrets.NUXT_PUBLIC_EMAILJS_SERVICE_ID }}
           NUXT_PUBLIC_EMAILJS_TEMPLATE_ID: ${{ secrets.NUXT_PUBLIC_EMAILJS_TEMPLATE_ID }}
           NUXT_PUBLIC_EMAILJS_PUBLIC_KEY: ${{ secrets.NUXT_PUBLIC_EMAILJS_PUBLIC_KEY }}
+          NUXT_PUBLIC_GTAG_ID: ${{ secrets.NUXT_PUBLIC_GTAG_ID }}
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

app/components/project-card/ProjectCard.vue

@@ -70,6 +70,7 @@
           rel="noopener noreferrer"
           class="text-stone-400 hover:text-stone-700 transition-colors"
           title="Ver código"
+          @click="handleGithubClick"
         >
           <Icon name="lucide:github" class="w-4 h-4" />
         </a>
@@ -80,6 +81,7 @@
           rel="noopener noreferrer"
           class="text-stone-400 hover:text-stone-700 transition-colors"
           title="Ver demo"
+          @click="handleDemoClick"
         >
           <Icon name="lucide:external-link" class="w-4 h-4" />
         </a>
@@ -88,6 +90,7 @@
           :to="project.links.caseStudy"
           class="text-stone-400 hover:text-stone-700 transition-colors"
           title="Ver case study"
+          @click="handleCaseStudyClick"
         >
           <Icon name="lucide:file-text" class="w-4 h-4" />
         </NuxtLink>
@@ -97,6 +100,12 @@
 </template>
 
 <script setup lang="ts">
+const {
+  trackProjectGithubClick,
+  trackProjectDemoClick,
+  trackProjectCaseStudyClick,
+} = useAnalytics();
+
 interface Project {
   id: string;
   title: string;
@@ -120,6 +129,18 @@ const props = defineProps<{
 
 const imageError = ref(false);
 
+const handleGithubClick = () => {
+  trackProjectGithubClick(props.project.id, props.project.title);
+};
+
+const handleDemoClick = () => {
+  trackProjectDemoClick(props.project.id, props.project.title);
+};
+
+const handleCaseStudyClick = () => {
+  trackProjectCaseStudyClick(props.project.id, props.project.title);
+};
+
 const statusLabel = computed(() => {
   const labels = {
     development: "Em dev",

app/composables/useAnalytics.ts

@@ -0,0 +1,207 @@
+export const useAnalytics = () => {
+  const { gtag } = useGtag()
+
+  const trackContactFormStart = () => {
+    gtag('event', 'contact_form_start', {
+      event_category: 'contact',
+      event_label: 'form_interaction',
+    })
+  }
+
+  const trackContactSubjectSelected = (subject: string) => {
+    gtag('event', 'contact_subject_selected', {
+      event_category: 'contact',
+      event_label: subject,
+      subject_value: subject,
+    })
+  }
+
+  const trackContactFormSubmit = () => {
+    gtag('event', 'contact_form_submit', {
+      event_category: 'contact',
+      event_label: 'form_submission',
+    })
+  }
+
+  const trackContactFormSuccess = () => {
+    gtag('event', 'contact_form_success', {
+      event_category: 'contact',
+      event_label: 'success',
+    })
+  }
+
+  const trackContactFormError = (errorType?: string) => {
+    gtag('event', 'contact_form_error', {
+      event_category: 'contact',
+      event_label: 'error',
+      error_type: errorType || 'unknown',
+    })
+  }
+
+  const trackCtaClick = (ctaText: string, ctaLocation: string, destinationPage: string) => {
+    gtag('event', 'cta_click', {
+      event_category: 'cta',
+      event_label: ctaText,
+      cta_text: ctaText,
+      cta_location: ctaLocation,
+      destination_page: destinationPage,
+    })
+  }
+
+  const trackHeroCtaClick = (ctaButton: string) => {
+    gtag('event', 'hero_cta_click', {
+      event_category: 'cta',
+      event_label: ctaButton,
+      cta_button: ctaButton,
+    })
+  }
+
+  const trackProjectGithubClick = (projectId: string, projectTitle: string) => {
+    gtag('event', 'project_github_click', {
+      event_category: 'project',
+      event_label: projectTitle,
+      project_id: projectId,
+      project_title: projectTitle,
+    })
+  }
+
+  const trackProjectDemoClick = (projectId: string, projectTitle: string) => {
+    gtag('event', 'project_demo_click', {
+      event_category: 'project',
+      event_label: projectTitle,
+      project_id: projectId,
+      project_title: projectTitle,
+    })
+  }
+
+  const trackProjectCaseStudyClick = (projectId: string, projectTitle: string) => {
+    gtag('event', 'project_case_study_click', {
+      event_category: 'project',
+      event_label: projectTitle,
+      project_id: projectId,
+      project_title: projectTitle,
+    })
+  }
+
+  const trackProjectFilterClick = (filterType: 'type' | 'tech', filterValue: string, selected: boolean) => {
+    gtag('event', 'project_filter_click', {
+      event_category: 'project',
+      event_label: filterValue,
+      filter_type: filterType,
+      filter_value: filterValue,
+      selected: selected,
+    })
+  }
+
+  const trackProjectSearch = (searchQuery: string, resultCount: number) => {
+    gtag('event', 'project_search', {
+      event_category: 'project',
+      event_label: searchQuery,
+      search_query: searchQuery,
+      result_count: resultCount,
+    })
+  }
+
+  const trackProjectClearFilters = (activeFiltersCount: number) => {
+    gtag('event', 'project_clear_filters', {
+      event_category: 'project',
+      event_label: 'clear_filters',
+      active_filters_count: activeFiltersCount,
+    })
+  }
+
+  const trackSocialClick = (platform: string) => {
+    gtag('event', 'social_click', {
+      event_category: 'social',
+      event_label: platform,
+      social_platform: platform,
+    })
+  }
+
+  const trackWhatsappClick = (fromPage: string) => {
+    gtag('event', 'whatsapp_click', {
+      event_category: 'contact',
+      event_label: 'whatsapp',
+      from_page: fromPage,
+    })
+  }
+
+  const trackEmailClick = () => {
+    gtag('event', 'email_click', {
+      event_category: 'contact',
+      event_label: 'email',
+    })
+  }
+
+  const trackPhoneClick = () => {
+    gtag('event', 'phone_click', {
+      event_category: 'contact',
+      event_label: 'phone',
+    })
+  }
+
+  const trackFaqOpen = (faqIndex: number, questionText: string) => {
+    gtag('event', 'faq_open', {
+      event_category: 'faq',
+      event_label: questionText,
+      faq_index: faqIndex,
+      question_text: questionText,
+    })
+  }
+
+  const trackFaqClose = (faqIndex: number) => {
+    gtag('event', 'faq_close', {
+      event_category: 'faq',
+      event_label: `faq_${faqIndex}`,
+      faq_index: faqIndex,
+    })
+  }
+
+  const trackScrollDepth = (percentScrolled: number, pagePath: string) => {
+    gtag('event', 'scroll_depth', {
+      event_category: 'engagement',
+      event_label: `${percentScrolled}%`,
+      percent_scrolled: percentScrolled,
+      page_path: pagePath,
+    })
+  }
+
+  const trackTimeOnPage = (timeSpent: number, pagePath: string) => {
+    gtag('event', 'time_on_page', {
+      event_category: 'engagement',
+      event_label: pagePath,
+      time_spent_seconds: timeSpent,
+      page_path: pagePath,
+    })
+  }
+
+  return {
+    // Formulário de contato
+    trackContactFormStart,
+    trackContactSubjectSelected,
+    trackContactFormSubmit,
+    trackContactFormSuccess,
+    trackContactFormError,
+    // CTAs
+    trackCtaClick,
+    trackHeroCtaClick,
+    // Projetos
+    trackProjectGithubClick,
+    trackProjectDemoClick,
+    trackProjectCaseStudyClick,
+    trackProjectFilterClick,
+    trackProjectSearch,
+    trackProjectClearFilters,
+    // Social e contato
+    trackSocialClick,
+    trackWhatsappClick,
+    trackEmailClick,
+    trackPhoneClick,
+    // FAQ
+    trackFaqOpen,
+    trackFaqClose,
+    // Engajamento
+    trackScrollDepth,
+    trackTimeOnPage,
+  }
+}

app/composables/useContact.ts

@@ -3,11 +3,44 @@ import { companies, contactInfo, faqs, getWhatsAppLink, socialLinks } from "~/da
 
 export const useContact = () => {
   const config = useRuntimeConfig();
+  const {
+    trackContactFormStart,
+    trackContactSubjectSelected,
+    trackContactFormSubmit,
+    trackContactFormSuccess,
+    trackContactFormError,
+    trackFaqOpen,
+    trackFaqClose,
+  } = useAnalytics();
 
   const openFaq = ref<number | null>(null);
+  const formStarted = ref(false);
 
   const toggleFaq = (index: number) => {
-    openFaq.value = openFaq.value === index ? null : index;
+    const wasOpen = openFaq.value === index;
+    openFaq.value = wasOpen ? null : index;
+
+    if (wasOpen) {
+      trackFaqClose(index);
+    } else {
+      const faq = faqs[index];
+      if (faq) {
+        trackFaqOpen(index, faq.question);
+      }
+    }
+  };
+
+  const handleFormStart = () => {
+    if (!formStarted.value) {
+      formStarted.value = true;
+      trackContactFormStart();
+    }
+  };
+
+  const handleSubjectChange = (subject: string) => {
+    if (subject) {
+      trackContactSubjectSelected(subject);
+    }
   };
 
   const form = reactive({
@@ -24,7 +57,9 @@ export const useContact = () => {
   const handleSubmit = async () => {
     isSubmitting.value = true;
     submitError.value = false;
-    
+
+    trackContactFormSubmit();
+
     try {
       await emailjs.send(
         config.public.emailjsServiceId,
@@ -38,17 +73,23 @@ export const useContact = () => {
         config.public.emailjsPublicKey
       );
 
+      trackContactFormSuccess();
+
       submitSuccess.value = true;
       form.name = "";
       form.email = "";
       form.subject = "";
       form.message = "";
+      formStarted.value = false;
 
       setTimeout(() => {
         submitSuccess.value = false;
       }, 5000);
     } catch (error) {
       console.error("Erro ao enviar email:", error);
+
+      trackContactFormError(error instanceof Error ? error.message : 'unknown');
+
       submitError.value = true;
 
       setTimeout(() => {
@@ -82,5 +123,7 @@ export const useContact = () => {
     submitError,
     handleSubmit,
     resetForm,
+    handleFormStart,
+    handleSubjectChange,
   };
 };