squid/blog
squid/blog
1
2
Fork 0
Code Issues 10 Pull Requests Actions Projects 1 Releases 7 Wiki Activity

BLOG-112 Add Google Analytics integration and update environment variables #113

Merged
squid merged 2 commits from BLOG-112_install_ga into main 2025-08-04 07:29:10 +08:00
Conversation 3 Commits 2 Files Changed 6 +40 -1
squid commented 2025-08-04 07:03:58 +08:00
Owner
Copy Link

Description

  • New env var: PUBLIC_GA_MEASUREMENT_ID=G-XXX

Package Changes

No response

Screenshots

image.png

Reference

Resolves #112

Checklist

  • A milestone is set
  • The related issuse has been linked to this branch
### Description - New env var: PUBLIC_GA_MEASUREMENT_ID=G-XXX ### Package Changes _No response_ ### Screenshots ![image.png](/attachments/5d830c44-f447-4e06-907a-2a0cbf976ca8) ### Reference Resolves #112 ### Checklist - [x] A milestone is set - [x] The related issuse has been linked to this branch
image.png
166 KiB
squid added this to the 0.3 milestone 2025-08-04 07:03:58 +08:00
squid added 1 commit 2025-08-04 07:03:58 +08:00
BLOG-112 feat: add Google Analytics integration and update environment variables
All checks were successful
Frontend CI / build (push) Successful in 1m6s
Details
PR Title Check / pr-title-check (pull_request) Successful in 12s
Details
Auto Comment On PR / add_improve_comment (pull_request) Successful in 17s
Details
db74a9b166 
- Implement Google Analytics script loading in a new component.
- Add GA_MEASUREMENT_ID to the environment configuration.
- Update layout to include GoogleAnalytics component.
- Enhance app.html with viewport and description meta tags.
bot commented 2025-08-04 07:04:05 +08:00
Collaborator
Copy Link

/improve

/improve
bot commented 2025-08-04 07:04:09 +08:00
Collaborator
Copy Link

PR Code Suggestions ✨

CategorySuggestion                                                                                                                                    Impact
Possible issue
Avoid redefining the global gtag function

The window.gtag function is defined by the Google Analytics script (gtag.js) itself
once it loads. Re-defining it in this component can override the official function,
leading to incorrect tracking or unexpected behavior. Ensure window.dataLayer is
initialized, and then allow the loaded gtag.js script to handle the gtag function.

frontend/src/lib/common/framework/ui/GoogleAnalytics.svelte [21-26]

 window.dataLayer = window.dataLayer || [];
-window.gtag = (command: 'config' | 'set' | 'js' | 'event', ...args: unknown[]) => {
-	window.dataLayer.push(command, ...args);
-};
+// The gtag function is defined by the gtag.js script itself.
+// No need to redefine it here.
 window.gtag('js', new Date());
 window.gtag('config', gaMeasurementId);
Suggestion importance[1-10]: 9

__

Why: The suggestion correctly identifies that manually defining window.gtag can interfere with the official Google Analytics script, potentially causing tracking issues. The improved_code accurately reflects the necessary change by removing the redundant gtag function definition.

High
## PR Code Suggestions ✨ <!-- --> <table><thead><tr><td><strong>Category</strong></td><td align=left><strong>Suggestion&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </strong></td><td align=center><strong>Impact</strong></td></tr><tbody><tr><td rowspan=1>Possible issue</td> <td> <details><summary>Avoid redefining the global <code>gtag</code> function</summary> ___ **The <code>window.gtag</code> function is defined by the Google Analytics script (<code>gtag.js</code>) itself <br>once it loads. Re-defining it in this component can override the official function, <br>leading to incorrect tracking or unexpected behavior. Ensure <code>window.dataLayer</code> is <br>initialized, and then allow the loaded <code>gtag.js</code> script to handle the <code>gtag</code> function.** [frontend/src/lib/common/framework/ui/GoogleAnalytics.svelte [21-26]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-112_install_ga/frontend/src/lib/common/framework/ui/GoogleAnalytics.svelte#L21-L26) ```diff window.dataLayer = window.dataLayer || []; -window.gtag = (command: 'config' | 'set' | 'js' | 'event', ...args: unknown[]) => { - window.dataLayer.push(command, ...args); -}; +// The gtag function is defined by the gtag.js script itself. +// No need to redefine it here. window.gtag('js', new Date()); window.gtag('config', gaMeasurementId); ``` <details><summary>Suggestion importance[1-10]: 9</summary> __ Why: The suggestion correctly identifies that manually defining `window.gtag` can interfere with the official Google Analytics script, potentially causing tracking issues. The `improved_code` accurately reflects the necessary change by removing the redundant `gtag` function definition. </details></details></td><td align=center>High </td></tr></tr></tbody></table>
squid added 1 commit 2025-08-04 07:22:54 +08:00
BLOG-112 refactor: simplify Google Analytics script initialization and remove gtag declaration from Window interface
All checks were successful
PR Title Check / pr-title-check (pull_request) Successful in 13s
Details
Frontend CI / build (push) Successful in 1m13s
Details
09bae1126f
squid force-pushed BLOG-112_install_ga from 09bae1126f to e9b716521d 2025-08-04 07:27:59 +08:00 Compare
squid commented 2025-08-04 07:28:44 +08:00
Author
Owner
Copy Link

The window.gtag function is defined by the Google Analytics script (gtag.js) itself
once it loads. Re-defining it in this component can override the official function,
leading to incorrect tracking or unexpected behavior. Ensure window.dataLayer is
initialized, and then allow the loaded gtag.js script to handle the gtag function.

frontend/src/lib/common/framework/ui/GoogleAnalytics.svelte [21-26]

 window.dataLayer = window.dataLayer || [];
-window.gtag = (command: 'config' | 'set' | 'js' | 'event', ...args: unknown[]) => {
-	window.dataLayer.push(command, ...args);
-};
+// The gtag function is defined by the gtag.js script itself.
+// No need to redefine it here.
 window.gtag('js', new Date());
 window.gtag('config', gaMeasurementId);

Defining gtag function is the sample code that Google provides:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'TAG_ID');
</script>

However, the original implementation import the script with <script lang="ts">, so we have to define the type of function arguments. I remove the language restriction so that we don't have to define the function type by ourselves.

Addressed in e9b716521d.

> **The <code>window.gtag</code> function is defined by the Google Analytics script (<code>gtag.js</code>) itself <br>once it loads. Re-defining it in this component can override the official function, <br>leading to incorrect tracking or unexpected behavior. Ensure <code>window.dataLayer</code> is <br>initialized, and then allow the loaded <code>gtag.js</code> script to handle the <code>gtag</code> function.** > > [frontend/src/lib/common/framework/ui/GoogleAnalytics.svelte [21-26]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-112_install_ga/frontend/src/lib/common/framework/ui/GoogleAnalytics.svelte#L21-L26) > > ```diff > window.dataLayer = window.dataLayer || []; > -window.gtag = (command: 'config' | 'set' | 'js' | 'event', ...args: unknown[]) => { > - window.dataLayer.push(command, ...args); > -}; > +// The gtag function is defined by the gtag.js script itself. > +// No need to redefine it here. > window.gtag('js', new Date()); > window.gtag('config', gaMeasurementId); > ``` Defining gtag function is the sample code that Google provides: ```html <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'TAG_ID'); </script> ``` However, the original implementation import the script with `<script lang="ts">`, so we have to define the type of function arguments. I remove the language restriction so that we don't have to define the function type by ourselves. Addressed in e9b716521d943c9263353883a3db33cb4c48f486.
squid scheduled this pull request to auto merge when all checks succeed 2025-08-04 07:29:04 +08:00
squid merged commit a6e1ee3c1c into main 2025-08-04 07:29:10 +08:00
squid deleted branch BLOG-112_install_ga 2025-08-04 07:30:16 +08:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
bug
Something is not working
design
dev
automation
dev
backend
dev
frontend
dev
improvement
duplicate
This issue or pull request already exists
enhancement
New feature
help wanted
Need some help
invalid
Something is wrong
question
More information is needed
wontfix
This won't be fixed
No Label
Milestone
No items
No Milestone 0.3
Projects
Clear projects
No project
Assignees
Clear assignees
bot zoe squid
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: squid/blog#113
No description provided.
Delete Branch "BLOG-112_install_ga"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?