🧐 gtm added, events created (#6)

components/earthquakes-chart.vue

@@ -103,8 +103,15 @@ const getChartData = () => {
  oldX = x;
  });
 };
+const { $gtm } = useNuxtApp();
+const route = useRoute();
 const openChartDetailModal = () => {
  emit("openChartDetailModal");
+ $gtm.pushUIEvent({
+ eventCategory: "Earthquakes Chart - Click",
+ eventAction: activeEarthquake.Region,
+ eventLabel: route.path,
+ });
 };
 onMounted(() => {
  getChartData();

components/partials/bottom-bar.vue

@@ -100,11 +100,17 @@ type MenuType = {
 };
 const router = useRouter();
 const route = useRoute();
+const { $gtm } = useNuxtApp();
 const activeMenu = computed(() => {
  return route.path;
 });
 const click = (menu: MenuType) => {
  router.push(menu.path);
+ $gtm.pushUIEvent({
+ eventCategory: "Bottom Bar - Click",
+ eventAction: menu.path,
+ eventLabel: route.path,
+ });
 };
 </script>
 <style lang="scss" scoped>

middleware/gtm-event.global.ts

@@ -0,0 +1,5 @@
+export default defineNuxtRouteMiddleware((to) => {
+ if (process.server) return;
+ const nuxtApp = useNuxtApp();
+ nuxtApp.$gtm.pushVirtualPageViewEvent(to.path);
+});

nuxt.config.ts

@@ -20,6 +20,10 @@ export default defineNuxtConfig({
  {
  src: "@/plugins/dayjs.plugin.ts",
  },
+ {
+ src: "@/plugins/gtm.plugin.ts",
+ mode: "client",
+ },
  ],
  modules: ["@pinia/nuxt"],
  app: {

plugins/gtm.plugin.ts

@@ -0,0 +1,14 @@
+export default defineNuxtPlugin((nuxtApp) => {
+ const inject = (w: Window, d: Document, s: string, l: string, i: string) => {
+ w[l] = w[l] || [];
+ w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+ var f = d.getElementsByTagName(s)[0],
+ j: HTMLScriptElement = 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);
+ };
+ inject(window, document, "script", "dataLayer", "G-DY1PV5SYM8");
+ nuxtApp.$gtm = gtmUtil;
+});

types/gtm.type.ts

@@ -0,0 +1,7 @@
+export type UIEventObject = {
+ event: string;
+ eventCategory: string;
+ eventAction: string;
+ eventLabel: string;
+ eventNonInteraction: boolean;
+};

utils/gtm.util.ts

@@ -0,0 +1,34 @@
+import type { UIEventObject } from "~~/types/gtm.type";
+
+const pushUIEvent = ({
+ eventCategory,
+ eventAction,
+ eventLabel,
+ eventNonInteraction = false,
+}: UIEventObject): void => {
+ if (process.server) return;
+ window?.dataLayer?.push({
+ event: "ui",
+ eventCategory,
+ eventAction,
+ eventLabel,
+ eventNonInteraction,
+ });
+};
+
+const pushVirtualPageViewEvent = (path: string): void => {
+ if (process.server) return;
+ window?.dataLayer?.push({
+ event: "vpv.Event",
+ eventCategory: "Virtual PageView",
+ eventAction: "Virtual PageView",
+ eventLabel: path,
+ eventValue: 0,
+ eventNonInteraction: false,
+ });
+};
+
+export default {
+ pushUIEvent,
+ pushVirtualPageViewEvent,
+};