Adds gtag events

spa/components/Common/Likeable.vue

@@ -2,6 +2,8 @@
 import type { WsEvent } from "~/config/types";
 import JSConfetti from "js-confetti";
 
+const { gtag } = useGtag()
+
 type Props = {
  name: string;
 };
@@ -33,6 +35,11 @@ const likes = ref([]);
 const app = useNuxtApp();
 const like = () => {
  app.$api.data.like(props.name);
+
+ gtag('event', 'like', {
+ label: 'like',
+ name: props.name,
+ });
 };
 
 const firework = (total: number = 40): void => {

spa/components/v1/Contribution.vue

@@ -2,6 +2,8 @@
 import { useIssuesStore } from "~/stores/issues";
 import GridRow from "~/components/v1/GridRow.vue";
 
+const { gtag } = useGtag()
+
 const store = useIssuesStore();
 store.fetch();
 
@@ -10,6 +12,10 @@ const issues = computed(() => {
 });
 
 const redirectTo = (url: string) => {
+ gtag('event', 'open_issue', {
+ label: 'open_issue',
+ url,
+ });
  window.open(url, "_blank");
 };
 </script>

spa/components/v1/Frameworks.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import GridRow from "~/components/v1/GridRow.vue";
-import CopyCommand from "~/components/v1/CopyCommand.vue";
-import GithubStars from "~/components/v1/GithubStars.vue";
 import Likeable from "~/components/Common/Likeable.vue";
 </script>
 

spa/components/v1/GithubStars.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useAppStore } from "~/stores/app";
 
+const { gtag } = useGtag()
+
 type Props = {
- repository: number;
+ repository: string;
  size: Enum<'sm' | 'md' | 'lg'>;
  progress: boolean;
  required: number;
@@ -16,16 +18,30 @@ const props = withDefaults(defineProps<Props>(), {
 
 const stars = computed(() => {
  const app = useAppStore();
- return app.github[props.repository].stars;
+ return app?.github[props.repository]?.stars || 0;
 });
 
 const currentProgress = computed(() => {
  return (stars.value / props.required) * 100;
 });
+
+const onOnOpenLink = () => {
+ gtag('event', 'open_github_stars', {
+ category: 'engagement',
+ label: 'github_stars',
+ size: props.size,
+ repository: props.repository,
+ });
+};
 </script>
 
 <template>
- <a class="stars-container" :class="size" :href="`https://github.com/buggregator/${repository}`" target="_blank">
+ <a class="stars-container"
+ :class="size"
+ :href="`https://github.com/buggregator/${repository}`"
+ target="_blank"
+ @click="onOnOpenLink"
+ >
  <div class="text">
  <img class="logo" src="~/assets/img/github.svg" alt="GitHub Logo"/> GitHub
  </div>

spa/components/v1/Hero.vue

@@ -15,13 +15,18 @@
 
  <div class="buttons">
  <button @click="openVideo" class="video">
- <svg viewBox="0 0 28.57 20" class="w-12" xmlns="http:https://www.w3.org/2000/svg"><path d="M27.97 3.12A3.58 3.58 0 0 0 25.45.6C23.22 0 14.29 0 14.29 0S5.35 0 3.12.6A3.58 3.58 0 0 0 .6 3.12C0 5.35 0 10 0 10s0 4.65.6 6.88a3.58 3.58 0 0 0 2.52 2.52c2.23.6 11.17.6 11.17.6s8.93 0 11.16-.6a3.58 3.58 0 0 0 2.52-2.52c.6-2.23.6-6.88.6-6.88s0-4.65-.6-6.88Z" fill="red"/><path d="M11.43 14.29 18.85 10l-7.42-4.28v8.57Z" fill="#fff"/></svg>
+ <svg viewBox="0 0 28.57 20" class="w-12" xmlns="http:https://www.w3.org/2000/svg">
+ <path
+ d="M27.97 3.12A3.58 3.58 0 0 0 25.45.6C23.22 0 14.29 0 14.29 0S5.35 0 3.12.6A3.58 3.58 0 0 0 .6 3.12C0 5.35 0 10 0 10s0 4.65.6 6.88a3.58 3.58 0 0 0 2.52 2.52c2.23.6 11.17.6 11.17.6s8.93 0 11.16-.6a3.58 3.58 0 0 0 2.52-2.52c.6-2.23.6-6.88.6-6.88s0-4.65-.6-6.88Z"
+ fill="red"/>
+ <path d="M11.43 14.29 18.85 10l-7.42-4.28v8.57Z" fill="#fff"/>
+ </svg>
  <span>Watch video</span>
  </button>
- <NuxtLink href="#demo" class="demo">
+ <NuxtLink href="#demo" class="demo" @click="tryDemo">
  Try demo
  </NuxtLink>
- <NuxtLink href="#install" class="install">
+ <NuxtLink href="#install" class="install" @click="install">
  Let's install
  </NuxtLink>
  </div>
@@ -31,13 +36,32 @@
 <script setup lang="ts">
 import GridRow from "~/components/v1/GridRow.vue";
 import GithubStars from "~/components/v1/GithubStars.vue";
-import {openModal} from "jenesius-vue-modal";
+import { openModal } from "jenesius-vue-modal";
 import IntroVideo from "~/components/v1/IntroVideo.vue";
 
+const { gtag } = useGtag()
+
 const openVideo = async () => {
- await openModal(IntroVideo, {
+ gtag('event', 'open_intro_video', {
+ label: 'open_intro_video',
+ component: 'hero',
+ });
+
+ await openModal(IntroVideo, {})
+};
+
+const install = () => {
+ gtag('event', 'install', {
+ label: 'install',
+ component: 'hero',
+ });
+};
 
- })
+const tryDemo = () => {
+ gtag('event', 'try_demo', {
+ label: 'try_demo',
+ component: 'hero',
+ });
 };
 </script>
 

spa/components/v1/HowToRun.vue

@@ -2,6 +2,21 @@
 import GridRow from "~/components/v1/GridRow.vue";
 import CopyCommand from "~/components/v1/CopyCommand.vue";
 
+const { gtag } = useGtag()
+
+const copyToClipboard = () => {
+ gtag('event', 'copy_command', {
+ label: 'copy_command',
+ component: 'how_to_run',
+ });
+};
+
+const openDocs = () => {
+ gtag('event', 'open_docs', {
+ label: 'open_docs',
+ component: 'how_to_run',
+ });
+};
 </script>
 
 <template>
@@ -18,10 +33,13 @@ import CopyCommand from "~/components/v1/CopyCommand.vue";
 
  <div class="mb-10 flex">
  <CopyCommand
- text="docker run -p 8000:8000 -p 1025:1025 -p 9912:9912 -p 9913:9913 ghcr.io/buggregator/server:latest"/>
+ text="docker run -p 8000:8000 -p 1025:1025 -p 9912:9912 -p 9913:9913 ghcr.io/buggregator/server:latest"
+ @click="copyToClipboard"
+ />
  </div>
 
- <a href="https://docs.buggregator.dev/getting-started.html" target="_blank" class="read-more-link gray">
+ <a href="https://docs.buggregator.dev/getting-started.html" target="_blank" class="read-more-link gray"
+ @clic="openDocs">
  Read more
  </a>
  </GridRow>

spa/components/v1/Team.vue

@@ -8,27 +8,6 @@ await store.fetch();
 const users = computed(() => {
  return store.team;
 });
-
-// const users = [
-// {
-// name: 'Pavel Buchnev',
-// role: 'Creator of Buggregator',
-// avatar: 'https://avatars.githubusercontent.com/u/773481?v=4',
-// github: 'https://github.com/butschster'
-// },
-// {
-// name: 'Aleksei Gagarin',
-// role: 'PHP developer',
-// avatar: 'https://avatars.githubusercontent.com/u/4152481?v=4',
-// github: 'https://github.com/roxblnfk'
-// },
-// {
-// name: 'Andrey Kuchuk',
-// role: 'Frontend developer',
-// avatar: 'https://avatars.githubusercontent.com/u/13301570?v=4',
-// github: 'https://github.com/Kreezag'
-// },
-// ]
 </script>
 
 <template>

spa/components/v1/Trap.vue

@@ -2,6 +2,15 @@
 import GridRow from "~/components/v1/GridRow.vue";
 import CopyCommand from "~/components/v1/CopyCommand.vue";
 import GithubStars from "~/components/v1/GithubStars.vue";
+
+const { gtag } = useGtag()
+
+const onOpenRepo = () => {
+ gtag('event', 'open_repo', {
+ label: 'open_repo',
+ component: 'trap',
+ });
+};
 </script>
 
 <template>
@@ -21,7 +30,8 @@ import GithubStars from "~/components/v1/GithubStars.vue";
  </div>
 
  <div class="flex gap-6">
- <a href="https://docs.buggregator.dev/trap/what-is-trap.html" target="_blank" class="read-more-link blue">
+ <a href="https://docs.buggregator.dev/trap/what-is-trap.html" target="_blank" class="read-more-link blue"
+ @click="onOpenRepo">
  Read more
  </a>
  <GithubStars repository="trap"/>

spa/layouts/default.vue

@@ -9,7 +9,7 @@
  background-color="#111827"
  color="#ffffff"
  transition-type="fade-down"
- :loading-speed="20"
+ :loading-speed="10"
  :transition-speed="500"
  />
 </template>

spa/nuxt.config.ts

@@ -42,7 +42,7 @@ export default defineNuxtConfig({
 
  router: {
  options: {
- hashMode: true
+ hashMode: false
  }
  },