feat: 新增 Google Ads 轉換追蹤功能，並在相關頁面中使用自定義 Hook

gatsby-ssr.js

@@ -55,3 +55,25 @@ export const wrapRootElement = ({ element }) => (
     {element}
   </>
 );
+
+export const onRenderBody = ({ setHeadComponents }) => {
+  setHeadComponents([
+    // Google tag (gtag.js)
+    <script
+      key="gtag-js"
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=AW-17499456338"
+    />,
+    <script
+      key="gtag-config"
+      dangerouslySetInnerHTML={{
+        __html: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', 'AW-17499456338');
+        `,
+      }}
+    />,
+  ]);
+};

src/hooks/useGoogleAdsConversion.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+/**
+ * 自定義 Hook：Google Ads 轉換追蹤
+ * 在頁面載入時觸發 Google Ads 轉換事件
+ */
+const useGoogleAdsConversion = () => {
+  useEffect(() => {
+    if (typeof window !== "undefined" && window.gtag) {
+      window.gtag("event", "conversion", {
+        send_to: "AW-17499456338/RoCwCMr3g4wbENKGsphB",
+        value: 1.0,
+        currency: "USD",
+      });
+    }
+  }, []);
+};
+
+export default useGoogleAdsConversion;

src/pages/club_activities.js

@@ -9,8 +9,12 @@ import {
   VerticalTimelineElement,
 } from "react-vertical-timeline-component";
 import "react-vertical-timeline-component/style.min.css";
+import useGoogleAdsConversion from "../hooks/useGoogleAdsConversion";
 
 const ClubActivities = () => {
+  // Google Ads 轉換追蹤
+  useGoogleAdsConversion();
+
   return (
     <div>
       <AppHeader title="iOS Club - 社團活動" />

src/pages/contest.js

@@ -2,8 +2,12 @@ import * as React from "react";
 import Footer from "../components/footer";
 import Navbar from "../components/navbar";
 import AppHeader from "../components/header";
+import useGoogleAdsConversion from "../hooks/useGoogleAdsConversion";
 
 const ContestPage = () => {
+  // Google Ads 轉換追蹤
+  useGoogleAdsConversion();
+
   return (
     <div className=" bg-iosbgblue">
       {/* Header */}

src/pages/course.js

@@ -3,8 +3,12 @@ import Footer from "../components/footer";
 import Navbar from "../components/navbar";
 import AppHeader from "../components/header";
 import ImageWithPlaceholder from "../components/image-with-placeholder";
+import useGoogleAdsConversion from "../hooks/useGoogleAdsConversion";
 
 const CoursePage = () => {
+  // Google Ads 轉換追蹤
+  useGoogleAdsConversion();
+
   const hideURL =
     "https://drive.google.com/drive/folders/1tdW1rLbbGZH0Z-ipcXY_fuhn1kLtHnIn?usp=share_link";
 

src/pages/gallery_list.js

@@ -9,10 +9,14 @@ import openInNew from "@iconify/icons-ic/baseline-open-in-new";
 import Pagination from "rc-pagination";
 import "../css/pagination.css";
 import ImageWithPlaceholder from "../components/image-with-placeholder";
+import useGoogleAdsConversion from "../hooks/useGoogleAdsConversion";
 
 const GalleryList = ({ data }) => {
   useState(1);
   const [currentPage, setCurrentPage] = useState(1);
+
+  // Google Ads 轉換追蹤
+  useGoogleAdsConversion();
   const itemCount = data.allGalleryJson.edges.length;
   const perPage = 8;
   const onPageChange = (page) => {

src/pages/index.js

@@ -14,8 +14,12 @@ import { Icon } from "@iconify/react";
 import loudspeakerIcon from "@iconify/icons-fluent-emoji-high-contrast/loudspeaker";
 import chevronUp from "@iconify/icons-akar-icons/chevron-up";
 import chevronDown from "@iconify/icons-akar-icons/chevron-down";
+import useGoogleAdsConversion from "../hooks/useGoogleAdsConversion";
 
 const IndexPage = (props) => {
+  // Google Ads 轉換追蹤
+  useGoogleAdsConversion();
+
   return (
     <div className="bg-iosbgblue">
       {/* Header */}

src/pages/swift_res.js

@@ -5,8 +5,12 @@ import Navbar from "../components/navbar";
 import { Icon } from "@iconify/react";
 import baselineDownloadForOffline from "@iconify/icons-ic/baseline-download-for-offline";
 import ImageWithPlaceholder from "../components/image-with-placeholder";
+import useGoogleAdsConversion from "../hooks/useGoogleAdsConversion";
 
 const SwiftPage = () => {
+  // Google Ads 轉換追蹤
+  useGoogleAdsConversion();
+
   return (
     <div className=" bg-iosbgblue">
       {/* Header */}