📦 chore: Google Tag Manager 대신 gtag 적용 (#310)

* 📦 chore: 태그 매니저 대신 gtag 적용 * 📦 chore: gtag 타입 정의 파일 작성 * ✨ feat: logEvent 유틸 함수 작성
dnd-side-project · Apr 26, 2024 · 08e28a6 · 08e28a6
1 parent 9ed6ea8
commit 08e28a6
Show file tree

Hide file tree

Showing 3 changed files with 212 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -48,35 +48,27 @@
       content="말 못한 고민을 공유하고, 서로 공감하며 위로를 주고받는 서비스"
     />
     <meta name="twitter:image" content="https://i.ibb.co/7SSvJzc/2.png" />
-    <!-- Google Tag Manager -->
-    <script>
-      (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-TQM5BHZD');
-    </script>
     <title>내 마음 속 바다</title>
     <meta
       name="description"
       content="말 못한 고민을 공유하고, 서로 공감하며 위로를 주고받는 서비스"
     />
   </head>
   <body>
-    <!-- Google Tag Manager (noscript) -->
-    <noscript
-      ><iframe
-        src="https://www.googletagmanager.com/ns.html?id=GTM-TQM5BHZD"
-        height="0"
-        width="0"
-        style="display: none; visibility: hidden"
-      ></iframe
-    ></noscript>
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-75REEP3X0L"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', 'G-75REEP3X0L');
+    </script>
+    <!-- End of Google tag (gtag.js) -->
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src/types/gtag.d.ts b/src/types/gtag.d.ts
@@ -0,0 +1,187 @@
+/* eslint-disable */
+// This file is from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/gtag.js/index.d.ts
+declare let gtag: Gtag.Gtag;
+declare namespace Gtag {
+  interface GtagCommands {
+    config: [
+      targetId: string,
+      config?: ControlParams | EventParams | ConfigParams | CustomParams,
+    ];
+    set:
+      | [targetId: string, config: CustomParams | boolean | string]
+      | [config: CustomParams];
+    js: [config: Date];
+    event: [
+      eventName: EventNames | (string & {}),
+      eventParams?: ControlParams | EventParams | CustomParams,
+    ];
+    get: [
+      targetId: string,
+      fieldName: FieldNames | string,
+      callback?: (field: string | CustomParams | undefined) => any,
+    ];
+    consent: [
+      consentArg: ConsentArg | (string & {}),
+      consentParams: ConsentParams,
+    ];
+  }
+
+  interface Gtag {
+    <Command extends keyof GtagCommands>(
+      command: Command,
+      ...args: GtagCommands[Command]
+    ): void;
+  }
+
+  interface ConfigParams {
+    page_title?: string | undefined;
+    page_location?: string | undefined;
+    page_path?: string | undefined;
+    send_page_view?: boolean | undefined;
+  }
+
+  interface CustomParams {
+    [key: string]: any;
+  }
+
+  interface ControlParams {
+    groups?: string | string[] | undefined;
+    send_to?: string | string[] | undefined;
+    event_callback?: (() => void) | undefined;
+    event_timeout?: number | undefined;
+  }
+
+  type EventNames =
+    | 'add_payment_info'
+    | 'add_shipping_info'
+    | 'add_to_cart'
+    | 'add_to_wishlist'
+    | 'begin_checkout'
+    | 'checkout_progress'
+    | 'earn_virtual_currency'
+    | 'exception'
+    | 'generate_lead'
+    | 'join_group'
+    | 'level_end'
+    | 'level_start'
+    | 'level_up'
+    | 'login'
+    | 'page_view'
+    | 'post_score'
+    | 'purchase'
+    | 'refund'
+    | 'remove_from_cart'
+    | 'screen_view'
+    | 'search'
+    | 'select_content'
+    | 'select_item'
+    | 'select_promotion'
+    | 'set_checkout_option'
+    | 'share'
+    | 'sign_up'
+    | 'spend_virtual_currency'
+    | 'tutorial_begin'
+    | 'tutorial_complete'
+    | 'unlock_achievement'
+    | 'timing_complete'
+    | 'view_cart'
+    | 'view_item'
+    | 'view_item_list'
+    | 'view_promotion'
+    | 'view_search_results';
+
+  interface EventParams {
+    checkout_option?: string | undefined;
+    checkout_step?: number | undefined;
+    content_id?: string | undefined;
+    content_type?: string | undefined;
+    coupon?: string | undefined;
+    currency?: string | undefined;
+    description?: string | undefined;
+    fatal?: boolean | undefined;
+    items?: Item[] | undefined;
+    method?: string | undefined;
+    number?: string | undefined;
+    promotions?: Promotion[] | undefined;
+    screen_name?: string | undefined;
+    search_term?: string | undefined;
+    shipping?: Currency | undefined;
+    tax?: Currency | undefined;
+    transaction_id?: string | undefined;
+    value?: number | undefined;
+    event_label?: string | undefined;
+    event_category?: string | undefined;
+  }
+
+  type Currency = string | number;
+
+  /**
+   * Interface of an item object used in lists for this event.
+   *
+   * Reference:
+   * @see {@link https://developers.google.com/analytics/devguides/collection/ga4/reference/events#view_item_item view_item_item}
+   * @see {@link https://developers.google.com/analytics/devguides/collection/ga4/reference/events#view_item_list_item view_item_list_item}
+   * @see {@link https://developers.google.com/analytics/devguides/collection/ga4/reference/events#select_item_item select_item_item}
+   * @see {@link https://developers.google.com/analytics/devguides/collection/ga4/reference/events#add_to_cart_item add_to_cart_item}
+   * @see {@link https://developers.google.com/analytics/devguides/collection/ga4/reference/events#view_cart_item view_cart_item}
+   */
+  interface Item {
+    item_id?: string | undefined;
+    item_name?: string | undefined;
+    affiliation?: string | undefined;
+    coupon?: string | undefined;
+    currency?: string | undefined;
+    creative_name?: string | undefined;
+    creative_slot?: string | undefined;
+    discount?: Currency | undefined;
+    index?: number | undefined;
+    item_brand?: string | undefined;
+    item_category?: string | undefined;
+    item_category2?: string | undefined;
+    item_category3?: string | undefined;
+    item_category4?: string | undefined;
+    item_category5?: string | undefined;
+    item_list_id?: string | undefined;
+    item_list_name?: string | undefined;
+    item_variant?: string | undefined;
+    location_id?: string | undefined;
+    price?: Currency | undefined;
+    promotion_id?: string | undefined;
+    promotion_name?: string | undefined;
+    quantity?: number | undefined;
+  }
+
+  interface Promotion {
+    creative_name?: string | undefined;
+    creative_slot?: string | undefined;
+    promotion_id?: string | undefined;
+    promotion_name?: string | undefined;
+  }
+
+  type FieldNames = 'client_id' | 'session_id' | 'gclid';
+
+  type ConsentArg = 'default' | 'update';
+
+  /**
+   * Reference:
+   * @see {@link https://support.google.com/tagmanager/answer/10718549#consent-types consent-types}
+   * @see {@link https://developers.google.com/tag-platform/devguides/consent consent}
+   */
+  interface ConsentParams {
+    ad_personalization?: 'granted' | 'denied' | undefined;
+    ad_user_data?: 'granted' | 'denied' | undefined;
+    ad_storage?: 'granted' | 'denied' | undefined;
+    analytics_storage?: 'granted' | 'denied' | undefined;
+    functionality_storage?: 'granted' | 'denied' | undefined;
+    personalization_storage?: 'granted' | 'denied' | undefined;
+    security_storage?: 'granted' | 'denied' | undefined;
+    wait_for_update?: number | undefined;
+    region?: string[] | undefined;
+  }
+}
+
+interface Window {
+  gtag: Gtag.Gtag;
+}
+
+/* eslint-enable */
diff --git a/src/utils/logEvent.ts b/src/utils/logEvent.ts
@@ -0,0 +1,11 @@
+/** Google Analytics에게 수집할 이벤트를 전달합니다. */
+export const logEvent = <Command extends keyof Gtag.GtagCommands>(
+  command: Command,
+  ...args: Gtag.GtagCommands[Command]
+): void => {
+  if (!window.gtag) {
+    throw new Error('Google Analytics is not initialized');
+  }
+
+  window.gtag(command, ...args);
+};