From 402dbb03cfed86d5ccda6d4fd43c8ba8bfbb8552 Mon Sep 17 00:00:00 2001
From: Vahid Al <thevahidal@gmail.com>
Date: Fri, 29 Dec 2023 15:53:22 +0330
Subject: [PATCH] Add Google Tag Manager integration

---
 README.md |  3 ++-
 data.toml |  1 +
 script.py | 17 ++++++++++++++++-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index fc2fd14..4026b38 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,8 @@ To customize your website, follow these steps:
 - `image`: The file address of your avatar. Place your avatar inside the `dist/img/` folder (e.g., "me.jpeg" - Note that the `/dist/img/` address is not included)
 - `theme`: Choose your website theme: "dark" or "light" (e.g., "dark")
 - `primary_color`: Specify your website's primary color using a hexadecimal color code (e.g., "#00897b")
-- text_align: Specify the text alignment for your website: "right", "left" or "center" (e.g., "center")
+- `text_align`: Specify the text alignment for your website: "right", "left" or "center" (e.g., "center")
+- `gtag_id`: Your Google Analytics tracking ID (e.g., "G-33WB8LVHR6")
 
 **Sections:**
 You can add multiple sections based on your requirements. For example, you may want a section for your projects, another for your social media links, and another for your merchandise products. Each section is defined using `[[sections]]`.
diff --git a/data.toml b/data.toml
index cd6b6e3..79c26bc 100644
--- a/data.toml
+++ b/data.toml
@@ -5,6 +5,7 @@ image = "jake.webp"
 theme = "dark"
 primary_color = "#d81b60"
 text_align = "center"
+gtag_id = "G-33WB8LVHR6"
 
 [[sections]]
 title = "Movies"
diff --git a/script.py b/script.py
index abd0157..99e48bd 100644
--- a/script.py
+++ b/script.py
@@ -1,6 +1,6 @@
 import tomllib
 
-from tinyhtml import html, h, frag
+from tinyhtml import html, h, frag, raw
 
 
 with open("data.toml", "rb") as f:
@@ -54,6 +54,21 @@
                     }}
                 """
             ),
+            raw(
+                f"""
+                    <!-- Google tag (gtag.js) -->
+                    <script async src="https://www.googletagmanager.com/gtag/js?id={data.get("gtag_id")}"></script>
+                    <script>
+                    window.dataLayer = window.dataLayer || [];
+                    function gtag(){{dataLayer.push(arguments);}}
+                    gtag('js', new Date());
+
+                    gtag('config', '{data.get("gtag_id")}');
+                    </script>
+                """
+            )
+            if data.get("gtag_id")
+            else None,
         ),
     )