Skip to content

Commit a93e098

Browse files
author
Michał Gryczka
committed
GTM added / GA4 removed
1 parent abef751 commit a93e098

File tree

5 files changed

+116
-2
lines changed

5 files changed

+116
-2
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ jobs:
4242

4343
- name: Build site
4444
run: pnpm build
45+
env:
46+
PUBLIC_GTM_ID: ${{ secrets.PUBLIC_GTM_ID }}
4547

4648
- name: Fix permissions
4749
run: |

‎GTM_SETUP.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Google Tag Manager Setup Instructions
2+
3+
## Overview
4+
This project has been migrated from direct Google Analytics 4 implementation to Google Tag Manager (GTM) for better tracking flexibility and easier management of marketing tools.
5+
6+
## Setup Steps
7+
8+
### 1. Create GTM Container
9+
1. Go to [Google Tag Manager](https://tagmanager.google.com/)
10+
2. Create a new account/container for your website
11+
3. Note your GTM Container ID (format: GTM-XXXXXXX)
12+
13+
### 2. Configure Environment Variable
14+
15+
#### **For GitHub Pages Deployment (Recommended):**
16+
1. Go to your GitHub repository
17+
2. Navigate to **Settings** → **Secrets and variables** → **Actions**
18+
3. Click **New repository secret**
19+
4. Name: `PUBLIC_GTM_ID`
20+
5. Value: `GTM-XXXXXXX` (your actual GTM container ID)
21+
22+
The GitHub Actions workflow has been updated to use this secret during build.
23+
24+
#### **For local development (.env.local):**
25+
```
26+
PUBLIC_GTM_ID=GTM-XXXXXXX
27+
```
28+
29+
#### **Alternative: Hardcode GTM ID**
30+
If you prefer simplicity, replace `GTM-XXXXXXX` directly in the GTM components with your actual GTM ID.
31+
32+
### 3. Configure GA4 in GTM
33+
1. In your GTM container, create a new **Google Analytics: GA4 Configuration** tag
34+
2. Use your existing Measurement ID: `G-Z2X2PB0P4E`
35+
3. Set the trigger to **All Pages**
36+
4. Publish the container
37+
38+
### 4. Optional: Add Additional Tracking
39+
With GTM, you can now easily add:
40+
- Facebook Pixel
41+
- LinkedIn Insight Tag
42+
- Conversion tracking
43+
- Custom events
44+
- And more...
45+
46+
## Files Modified
47+
- `src/components/analytics/GTM.astro` - GTM head script
48+
- `src/components/analytics/GTMBody.astro` - GTM body script (noscript fallback)
49+
- `src/layouts/BaseLayout.astro` - Updated to use GTM instead of direct GA4
50+
51+
## Files to Remove (Optional)
52+
After confirming GTM works correctly:
53+
- `src/components/analytics/Google.astro`
54+
- `src/components/analytics/google.js`
55+
56+
## Testing
57+
1. Install GTM container ID
58+
2. Use [Google Tag Assistant](https://tagassistant.google.com/) to verify GTM is firing
59+
3. Check GA4 real-time reports to confirm data is flowing
60+
61+
## Benefits of GTM
62+
- **Centralized Management**: All tracking codes in one place
63+
- **No Code Deployments**: Add new tracking without code changes
64+
- **Advanced Tracking**: Easy setup of conversion tracking, custom events
65+
- **Team Collaboration**: Marketing team can manage tags independently
66+
- **Version Control**: GTM has built-in version control and rollback
67+
- **Testing**: Preview and debug mode before publishing changes

‎src/components/analytics/GTM.astro‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
//@ts-ignore
3+
const isProd = import.meta.env.PROD as boolean;
4+
// Get GTM ID from environment variable or use your actual GTM ID
5+
const GTM_ID = import.meta.env.PUBLIC_GTM_ID || "GTM-XXXXXXX"; // Replace GTM-XXXXXXX with your actual ID
6+
---
7+
8+
{
9+
isProd && (
10+
<>
11+
<!-- Google Tag Manager -->
12+
<script is:inline>
13+
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
14+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
15+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
16+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
17+
})(window,document,'script','dataLayer','{GTM_ID}');
18+
</script>
19+
<!-- End Google Tag Manager -->
20+
</>
21+
)
22+
}

‎src/components/analytics/GTMBody.astro‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
//@ts-ignore
3+
const isProd = import.meta.env.PROD as boolean;
4+
// Get GTM ID from environment variable or use your actual GTM ID
5+
const GTM_ID = import.meta.env.PUBLIC_GTM_ID || "GTM-XXXXXXX"; // Replace GTM-XXXXXXX with your actual ID
6+
---
7+
8+
{
9+
isProd && (
10+
<!-- Google Tag Manager (noscript) -->
11+
<noscript>
12+
<iframe
13+
src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
14+
height="0"
15+
width="0"
16+
style="display:none;visibility:hidden">
17+
</iframe>
18+
</noscript>
19+
<!-- End Google Tag Manager (noscript) -->
20+
)
21+
}

‎src/layouts/BaseLayout.astro‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import FloatingLinks from "../components/FloatingLinks.astro";
33
import Footer from "../components/base/Footer.astro";
44
import "../styles/global.scss";
55
import { CookieBar } from "../components/base/CookieBar/CookieBar";
6-
import Google from "../components/analytics/Google.astro";
6+
import GTM from "../components/analytics/GTM.astro";
7+
import GTMBody from "../components/analytics/GTMBody.astro";
78
import Clarity from "../components/analytics/Clarity.astro";
89
910
const favSizes = [
@@ -82,10 +83,11 @@ const { url, title, description, featuredImage, imageWidth, imageHeight } = Astr
8283
}
8384
<link rel="icon" type="image/ico" href="/favicon/favicon.ico" />
8485
<link rel="sitemap" href="/sitemap-index.xml" />
85-
<Google />
86+
<GTM />
8687
<Clarity />
8788
</head>
8889
<body>
90+
<GTMBody />
8991
<div class="page-container">
9092
<slot />
9193
<Footer />

0 commit comments

Comments
 (0)