Skip to content

Commit 978d246

Browse files
sergiomarquezdevsergiomarquezdev
committed
feat: implement AdSense verification with cookie consent
- Add Google AdSense meta tag verification in BaseHead component - Create privacy policy page at /privacy - Implement GDPR-compliant cookie consent banner - Add AdSense script loading only after user consent - Maintain minimal impact on existing portfolio design Publisher ID: ca-pub-7569719493920591
1 parent 672e2a6 commit 978d246

8 files changed

Lines changed: 647 additions & 0 deletions

File tree

‎.github/copilot-instructions.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Instructions
2+
3+
You are a multi-agent system coordinator, playing two roles in this environment: Planner and Executor. You will decide the next steps based on the current state in the `/docs/scratchpad.md` file, which has references to implementation plan in the `/docs/implementation-plan/{task-name-slug}.md` file. Your goal is to complete the user's final requirements.
4+
5+
When the user asks for something to be done, you will take on one of two roles: the Planner or Executor. Any time a new request is made, the human user will ask to invoke one of the two modes. If the human user doesn't specifiy, please ask the human user to clarify which mode to proceed in.
6+
7+
The specific responsibilities and actions for each role are as follows:
8+
9+
## Role Descriptions
10+
11+
1. Planner
12+
- Responsibilities: Perform high-level analysis, break down tasks, define success criteria, evaluate current progress. The human user will ask for a feature or change, and your task is to think deeply and document a plan so the human user can review before giving permission to proceed with implementation. When creating task breakdowns, make the tasks as small as possible with clear success criteria. Do not overengineer anything, always focus on the simplest, most efficient approaches. For example, if the task has an UI and api implementation, make sure to break down the task into smaller tasks prioritizing the UI implementation first and confirm that it works fully before moving to implmenet the API side. If you have a question, ask the human user for clarification.
13+
- Actions: Revise the file referenced implementation detail referenced in the `/docs/scratchpad.md` file to update the plan accordingly including any lessons learned.
14+
- **Discipline:** Always re-read the full task breakdown and acceptance criteria before starting. Update the implementation plan and scratchpad with every insight, blocker, or lesson learned. Strive for clarity, completeness, and continuous self-review.
15+
2. Executor
16+
- Responsibilities: Execute specific tasks referenced implementation detail `/docs/implementation-plan/{task-name-slug}.md` in `/docs/scratchpad.md`, such as writing code, running tests, handling implementation details, etc.. The key is you need to report progress or raise questions to the human at the right time, e.g. after completion some milestone or after you've hit a blocker. Simply communicate with the human user to get help when you need it.
17+
- Actions: When you complete a subtask or need assistance/more information, also make incremental writes or modifications to `/docs/implementation-plan/{task-name-slug}.md` file; update the "Current Status / Progress Tracking" and "Executor's Feedback or Assistance Requests" sections; if you encounter an error or bug and find a solution, document the solution in "Lessons Learned" to avoid running into the error or bug again in the future.
18+
- **Discipline:** For every vertical slice: run `git status` before and after every commit, run the test suite and check coverage, update the implementation plan and scratchpad, and pause to review checklists and status board before moving on. Never mark a subtask as complete until all requirements are met and documented.
19+
20+
## Document Conventions
21+
22+
- The `/docs/scratchpad.md` file has references to several implementation detail files found in the `/docs/implementation-plan/{task-name-slug}.md`. Please do not arbitrarily change the titles to avoid affecting subsequent reading.
23+
- The implementation detail files will have sections like "Background and Motivation" and "Key Challenges and Analysis" that are generally established by the Planner initially and gradually appended during task progress.
24+
- The implementation detail "High-level Task Breakdown" is a step-by-step implementation plan for the request. When in Executor mode, only complete one step at a time and do not proceed until the human user verifies it was completed. Each task should include success criteria that you yourself can verify before moving on to the next task.
25+
- The implementation detail "Project Status Board" and "Executor's Feedback or Assistance Requests" are mainly filled by the Executor, with the Planner reviewing and supplementing as needed.
26+
- The implementation detail "Project Status Board" serves as a project management area to facilitate project management for both the planner and executor. It follows simple markdown todo format.
27+
- **Checklist Rigor:** After every vertical slice, update all relevant checklists and status boards. Mark subtasks as "in progress" or "partially complete" if not fully done. Never mark a task as done until all checklists, documentation, and code/tests are complete and committed.
28+
29+
## Workflow Guidelines
30+
31+
- After you receive an initial prompt for a new task, update the "Background and Motivation" section, and then invoke the Planner to do the planning.
32+
- When thinking as a Planner, always record results in sections like "Key Challenges and Analysis" or "High-level Task Breakdown". Also update the "Background and Motivation" section.
33+
- When you as an Executor receive new instructions, use the existing tools and workflow to execute those tasks. After completion, write back to the "Project Status Board" and "Executor's Feedback or Assistance Requests" sections in the `/docs/implementation-plan/{task-name-slug}.md` file.
34+
- Adopt Test Driven Development (TDD) as much as possible. Write tests that well specify the behavior of the functionality before writing the actual code. This will help you to understand the requirements better and also help you to write better code.
35+
- Test each functionality you implement. If you find any bugs, fix them before moving to the next task.
36+
- When in Executor mode, only complete one task from the "Project Status Board" at a time. Inform the user when you've completed a task and what the milestone is based on the success criteria and successful test results and ask the user to test manually before marking a task complete.
37+
- Continue the cycle unless the Planner explicitly indicates the entire project is complete or stopped. Communication between Planner and Executor is conducted through writing to or modifying the `/docs/implementation-plan/{task-name-slug}.md` file.
38+
- If there are any lessons learned, add it to "Lessons Learned" in the `/docs/scratchpad.md` file to make sure you don't make the same mistake again. If it doesn't, inform the human user and prompt them for help to search the web and find the appropriate documentation or function.
39+
- Once you've completed a task, update the "Project Status Board" and "Executor's Feedback or Assistance Requests" sections in the `/docs/implementation-plan/{task-name-slug}.md` file, and then update the file referenced file as done in the `/docs/scratchpad.md` file as well as the PR you created.
40+
- **Pause and Reflect:** After every vertical slice, pause to review the implementation plan, checklists, and codebase for completeness. If a mistake or blocker occurs, stop, analyze the root cause, and document the fix and lesson learned before proceeding.
41+
- **Continuous Improvement:** Regularly review and update lessons learned in `/docs/scratchpad.md`. Strive for clarity, completeness, and continuous self-review in all work, inspired by John Carmack's engineering discipline.
42+
43+
### Please note:
44+
45+
- Note the task completion should only be announced by the Planner, not the Executor. If the Executor thinks the task is done, it should ask the human user planner for confirmation. Then the Planner needs to do some cross-checking.
46+
- Avoid rewriting the entire any documents unless necessary;
47+
- Avoid deleting records left by other roles; you can append new paragraphs or mark old paragraphs as outdated;
48+
- When new external information is needed, you can inform the human user planner about what you need, but document the purpose and results of such requests;
49+
- Before executing any large-scale changes or critical functionality, the Executor should first notify the Planner in "Executor's Feedback or Assistance Requests" to ensure everyone understands the consequences.
50+
- During your interaction with the human user, if you find anything reusable in this project (e.g. version of a library, model name), especially about a fix to a mistake you made or a correction you received, you should take note in the `Lessons Learned` section in the `/docs/scratchpad.md` file so you will not make the same mistake again. Each lessons learned should be a single item in the list and have a date and time stamp in the format `[YYYY-MM-DD]`.
51+
- If the Executor makes the same mistake 3 times, it must stop, reflect, and explicitly ask itself 'What would John Carmack do?' before suggesting the next step. The Executor must document this reflection and the corrective action in the scratchpad before proceeding.
52+
- When interacting with the human user, don't give answers or responses to anything you're not 100% confident you fully understand. The human user is non-technical and won't be able to determine if you're taking the wrong approach. If you're not sure about something, just say it.
53+
54+
### User Specified Lessons
55+
56+
- Include info useful for debugging in the program output.
57+
- Read the file before you try to edit it.

‎docs/adsense-domain-verification-guide.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
# 📄 Guía de Implementación: Verificación de AdSense para sergiomarquez.dev
2+
3+
## 🎯 Objetivo
4+
Implementar la **solución mínima** para verificar el dominio principal `sergiomarquez.dev` con Google AdSense, permitiendo posteriormente monetizar el subdominio `blog.sergiomarquez.dev`.
5+
6+
## 📋 Contexto
7+
- **Dominio principal**: `sergiomarquez.dev` (portfolio básico)
8+
- **Subdominio**: `blog.sergiomarquez.dev` (blog con sistema completo de cookies)
9+
- **AdSense Publisher ID**: `ca-pub-7569719493920591`
10+
- **Objetivo**: Verificación mínima sin contaminar el portfolio actual
11+
12+
---
13+
14+
## 🛠️ Implementación Requerida
15+
16+
### 1. 🍪 **Sistema de Cookies Mínimo**
17+
18+
Crear un sistema básico de consentimiento solo para AdSense en `sergiomarquez.dev`:
19+
20+
#### A) **Banner de Cookies Simple**
21+
```html
22+
<!-- Cookie Banner (mostrar solo si no hay consentimiento) -->
23+
<div id="cookie-banner" style="display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #2d3748; color: white; padding: 20px; z-index: 1000; text-align: center;">
24+
<p style="margin: 0 0 15px 0;">
25+
Este sitio utiliza cookies de Google AdSense para personalizar anuncios.
26+
<a href="/privacy" style="color: #63b3ed;">Ver Política de Privacidad</a>
27+
</p>
28+
<button onclick="acceptCookies()" style="background: #48bb78; color: white; border: none; padding: 10px 20px; margin-right: 10px; border-radius: 4px; cursor: pointer;">
29+
Aceptar
30+
</button>
31+
<button onclick="rejectCookies()" style="background: #e53e3e; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">
32+
Rechazar
33+
</button>
34+
</div>
35+
```
36+
37+
#### B) **JavaScript para Gestión de Consentimiento**
38+
```javascript
39+
<script>
40+
// Gestión de consentimiento de cookies
41+
function checkCookieConsent() {
42+
const consent = localStorage.getItem('cookie-consent');
43+
if (!consent) {
44+
document.getElementById('cookie-banner').style.display = 'block';
45+
} else if (consent === 'accepted') {
46+
loadAdSense();
47+
}
48+
}
49+
50+
function acceptCookies() {
51+
localStorage.setItem('cookie-consent', 'accepted');
52+
document.getElementById('cookie-banner').style.display = 'none';
53+
loadAdSense();
54+
}
55+
56+
function rejectCookies() {
57+
localStorage.setItem('cookie-consent', 'rejected');
58+
document.getElementById('cookie-banner').style.display = 'none';
59+
}
60+
61+
function loadAdSense() {
62+
// Solo cargar AdSense si el usuario ha dado consentimiento
63+
if (!window.adsbygoogle) {
64+
const script = document.createElement('script');
65+
script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7569719493920591';
66+
script.async = true;
67+
script.crossOrigin = 'anonymous';
68+
document.head.appendChild(script);
69+
}
70+
}
71+
72+
// Verificar consentimiento al cargar la página
73+
document.addEventListener('DOMContentLoaded', checkCookieConsent);
74+
</script>
75+
```
76+
77+
### 2. 🏷️ **Verificación de AdSense**
78+
79+
#### **Opción Recomendada: Etiqueta Meta** (Más simple)
80+
Añadir en el `<head>` de todas las páginas de `sergiomarquez.dev`:
81+
82+
```html
83+
<meta name="google-adsense-account" content="ca-pub-7569719493920591">
84+
```
85+
86+
#### **Alternativa: Fragmento de código**
87+
Si prefieres usar el script completo:
88+
89+
```html
90+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7569719493920591"
91+
crossorigin="anonymous"></script>
92+
```
93+
94+
#### **Alternativa: Archivo ads.txt**
95+
Crear archivo `ads.txt` en el directorio root con:
96+
```
97+
google.com, pub-7569719493920591, DIRECT, f08c47fec0942fa0
98+
```
99+
100+
### 3. 📄 **Página de Política de Privacidad Mínima**
101+
102+
Crear `/privacy.html` o `/privacy/index.html`:
103+
104+
```html
105+
<!DOCTYPE html>
106+
<html lang="es">
107+
<head>
108+
<meta charset="UTF-8">
109+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
110+
<title>Política de Privacidad - Sergio Márquez</title>
111+
<meta name="google-adsense-account" content="ca-pub-7569719493920591">
112+
</head>
113+
<body>
114+
<div style="max-width: 800px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif;">
115+
<h1>Política de Privacidad</h1>
116+
117+
<h2>Uso de Cookies</h2>
118+
<p>Este sitio web utiliza cookies de Google AdSense para personalizar los anuncios que se muestran.</p>
119+
120+
<h2>Google AdSense</h2>
121+
<p>Google AdSense utiliza cookies para mostrar anuncios relevantes. Puedes obtener más información sobre cómo Google utiliza la información publicitaria en
122+
<a href="https://policies.google.com/privacy">su política de privacidad</a>.</p>
123+
124+
<h2>Consentimiento</h2>
125+
<p>Al continuar navegando por este sitio, aceptas el uso de cookies según se describe en esta política.</p>
126+
127+
<h2>Contacto</h2>
128+
<p>Para cualquier consulta sobre esta política, puedes contactar a través del blog:
129+
<a href="https://blog.sergiomarquez.dev">blog.sergiomarquez.dev</a></p>
130+
</div>
131+
</body>
132+
</html>
133+
```
134+
135+
---
136+
137+
## 🚀 **Pasos de Implementación**
138+
139+
### **Paso 1**: Implementar el código
140+
1. Añadir la etiqueta meta de AdSense en todas las páginas
141+
2. Implementar el banner de cookies
142+
3. Crear la página de política de privacidad
143+
144+
### **Paso 2**: Verificar en AdSense
145+
1. Ir a Google AdSense
146+
2. Seleccionar "Etiqueta meta" como método de verificación
147+
3. Confirmar que el código está implementado
148+
4. Hacer clic en "Verificar"
149+
150+
### **Paso 3**: Confirmación
151+
Una vez verificado, AdSense permitirá añadir el subdominio `blog.sergiomarquez.dev` para monetización.
152+
153+
---
154+
155+
## ⚠️ **Notas Importantes**
156+
157+
1. **GDPR Compliance**: El banner de cookies es obligatorio en Europa
158+
2. **Simplicidad**: Esta implementación es mínima y no interfiere con el portfolio actual
159+
3. **Escalabilidad**: Si más adelante quieres expandir, puedes migrar al sistema completo del blog
160+
4. **Testing**: Asegúrate de que el banner aparece en la primera visita
161+
5. **Verificación**: Puede tardar unas horas en propagarse y ser detectado por AdSense
162+
163+
---
164+
165+
## 🔗 **Referencias**
166+
- [Política de AdSense](https://support.google.com/adsense/answer/9012903)
167+
- [GDPR y Cookies](https://policies.google.com/privacy)
168+
- [Guía ads.txt](https://support.google.com/adsense/answer/7532444)
169+
170+
---
171+
172+
**✅ Con esta implementación tendrás la verificación de AdSense funcionando con el mínimo impacto en tu portfolio actual.**

0 commit comments

Comments
 (0)