Skip to content

Commit 0276f3a

Browse files
danielmonettellidanielmonettelli
committed
🚀 Implement AMP Auto Ads integration for Google AdSense
1 parent 8399b6a commit 0276f3a

File tree

8 files changed

+156
-26
lines changed

8 files changed

+156
-26
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,5 @@ package-lock.json
2525
# Misc
2626
_sass/vendors
2727
assets/js/dist
28+
29+
.github/copilot-instructions.md

‎AMP_ADSENSE_SETUP.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Google AdSense Configuration with AMP Auto Ads
2+
3+
## 📋 Summary
4+
Google AdSense configuration with AMP (Accelerated Mobile Pages) Auto Ads support has been implemented according to Google specifications.
5+
6+
## ✅ Implementation Completed
7+
8+
### Step 1: AMP Script in `<head>`
9+
- ✅ Added in `_includes/head-adsense.html`
10+
- ✅ Script: `https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js`
11+
- ✅ Conditional: Only loads if `site.adsense.amp_enabled: true`
12+
13+
### Step 2: `<amp-auto-ads>` Element after `<body>`
14+
- ✅ Implemented via JavaScript for Jekyll/Chirpy compatibility
15+
- ✅ File: `assets/js/amp-auto-ads.js`
16+
- ✅ Configuration: Automatic client ID from `_config.yml`
17+
18+
## 🔧 Configuration in `_config.yml`
19+
20+
```yaml
21+
google_adsense: "ca-pub-7596549899792751"
22+
adsense:
23+
enabled: true # General AdSense
24+
auto_ads: true # Traditional automatic ads
25+
amp_enabled: true # 🆕 AMP Auto Ads (NEW)
26+
show_in_posts: true
27+
show_in_pages: false
28+
```
29+
30+
## 📁 Modified/Created Files
31+
32+
1. **`_config.yml`** - Added `amp_enabled: true`
33+
2. **`_includes/head-adsense.html`** - AMP script in head
34+
3. **`_includes/head-custom.html`** - JavaScript configuration
35+
4. **`assets/js/amp-auto-ads.js`** - 🆕 AMP Auto Ads logic
36+
5. **`assets/css/adsense.css`** - AMP styles
37+
6. **`_includes/amp-auto-ads.html`** - 🆕 AMP template (backup)
38+
39+
## 🎯 How It Works
40+
41+
1. **Head**: AMP library and JS configuration loads
42+
2. **Body**: JavaScript inserts `<amp-auto-ads>` at content beginning
43+
3. **Client**: Automatically uses `ca-pub-7596549899792751`
44+
45+
## ⚙️ Functionality Control
46+
47+
To **enable** AMP Auto Ads:
48+
```yaml
49+
adsense:
50+
amp_enabled: true
51+
```
52+
53+
To **disable** AMP Auto Ads:
54+
```yaml
55+
adsense:
56+
amp_enabled: false
57+
```
58+
59+
## 📝 Important Notes
60+
61+
- Ads may take **up to 1 hour** to appear
62+
- Compatible with Jekyll + Chirpy theme
63+
- Does not interfere with existing AdSense ads
64+
- Fully responsive for mobile devices
65+
66+
## 🔍 Verification
67+
68+
1. Run: `./tools/run.sh` for local server
69+
2. Inspect element: Look for `<amp-auto-ads>` in DOM
70+
3. Console: Verify no AMP errors
71+
4. Wait up to 1 hour to see ads in production
72+
73+
---
74+
**Implemented**: {{ "now" | date: "%Y-%m-%d %H:%M" }}
75+
**AdSense Client**: ca-pub-7596549899792751

‎_config.yml‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ lang: en
1212
timezone: America/Lima
1313

1414
# Google AdSense configuration
15-
google_adsense: "ca-pub-7596549899792751" # Tu ID de cliente de Google AdSense
15+
google_adsense: "ca-pub-7596549899792751" # Your Google AdSense client ID
1616
adsense:
17-
enabled: true # Activar/desactivar globalmente AdSense
18-
auto_ads: true # Habilitar anuncios automáticos
19-
# Configuración para mostrar anuncios en distintos lugares
20-
show_in_posts: true # Mostrar anuncios en posts
21-
show_in_pages: false # No mostrar en páginas estáticas
17+
enabled: true # Enable/disable AdSense globally
18+
auto_ads: true # Enable automatic ads
19+
amp_enabled: true # Enable AMP Auto Ads
20+
# Configuration to show ads in different places
21+
show_in_posts: true # Show ads in posts
22+
show_in_pages: false # Don't show on static pages
2223

2324
# jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
2425
# ↓ --------------------------

‎_includes/amp-auto-ads.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{% if site.adsense.enabled and site.adsense.amp_enabled %}
2+
<!-- AMP Auto Ads - Step 2: Code after <body> -->
3+
<amp-auto-ads type="adsense" data-ad-client="{{ site.google_adsense }}">
4+
</amp-auto-ads>
5+
{% endif %}

‎_includes/head-adsense.html‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1-
{% if site.adsense.enabled %}
2-
{% include adsense.html %}
3-
4-
{% if site.adsense.auto_ads %}
5-
<script>
6-
(adsbygoogle = window.adsbygoogle || []).push({
7-
google_ad_client: "{{ site.google_adsense }}",
8-
enable_page_level_ads: true
9-
});
10-
</script>
11-
{% endif %}
12-
{% endif %}
1+
{% if site.adsense.enabled %} {% include adsense.html %}
2+
3+
<!-- AMP Auto Ads Script - Step 1 -->
4+
{% if site.adsense.amp_enabled %}
5+
<script
6+
async
7+
custom-element="amp-auto-ads"
8+
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
9+
></script>
10+
{% endif %} {% if site.adsense.auto_ads %}
11+
<script>
12+
(adsbygoogle = window.adsbygoogle || []).push({
13+
google_ad_client: "{{ site.google_adsense }}",
14+
enable_page_level_ads: true,
15+
});
16+
</script>
17+
{% endif %} {% endif %}

‎_includes/head-custom.html‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
1-
<!-- Inyección de Google AdSense en el head -->
1+
<!-- Google AdSense injection in head -->
22
{% include head-adsense.html %}
33

4-
<!-- Estilos para anuncios -->
5-
<link rel="stylesheet" href="{{ '/assets/css/adsense.css' | relative_url }}">
4+
<!-- Configuration for AMP Auto Ads -->
5+
{% if site.adsense.enabled and site.adsense.amp_enabled %}
6+
<script>
7+
window.adsenseConfig = {
8+
enabled: {{ site.adsense.enabled }},
9+
ampEnabled: {{ site.adsense.amp_enabled }},
10+
clientId: "{{ site.google_adsense }}"
11+
};
12+
</script>
13+
<script defer src="{{ '/assets/js/amp-auto-ads.js' | relative_url }}"></script>
14+
{% endif %}
15+
16+
<!-- Styles for ads -->
17+
<link rel="stylesheet" href="{{ '/assets/css/adsense.css' | relative_url }}" />

‎assets/css/adsense.css‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,36 @@
1-
/* Estilos para los contenedores de anuncios */
1+
/* Styles for ad containers */
22
.ad-container {
33
text-align: center;
44
margin: 2rem auto;
55
overflow: hidden;
66
max-width: 100%;
77
}
88

9-
/* Asegurarse de que los anuncios son responsivos */
9+
/* Ensure ads are responsive */
1010
.ad-container ins.adsbygoogle {
1111
margin: 0 auto;
1212
}
1313

14-
/* Separador para anuncios en artículos */
14+
/* Separator for ads in articles */
1515
.ad-separator {
1616
margin: 2rem 0;
1717
border-bottom: 1px solid #f0f0f0;
1818
}
1919

20-
/* Anuncios en la barra lateral */
20+
/* Sidebar ads */
2121
.ad-sidebar {
2222
margin-bottom: 2rem;
23-
}
23+
}
24+
25+
/* Specific styles for AMP Auto Ads */
26+
amp-auto-ads {
27+
display: block;
28+
width: 100%;
29+
}
30+
31+
/* Hide AMP elements if not compatible */
32+
@media (max-width: 480px) {
33+
amp-auto-ads {
34+
max-width: 100%;
35+
}
36+
}

‎assets/js/amp-auto-ads.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// AMP Auto Ads - JavaScript injection
2+
document.addEventListener('DOMContentLoaded', function () {
3+
// Only insert if AdSense is enabled and AMP is enabled
4+
if (
5+
typeof window.adsenseConfig !== 'undefined' &&
6+
window.adsenseConfig.enabled &&
7+
window.adsenseConfig.ampEnabled
8+
) {
9+
// Create the amp-auto-ads element
10+
var ampAutoAds = document.createElement('amp-auto-ads');
11+
ampAutoAds.setAttribute('type', 'adsense');
12+
ampAutoAds.setAttribute('data-ad-client', window.adsenseConfig.clientId);
13+
14+
// Insert after body (at the beginning of content)
15+
document.body.insertBefore(ampAutoAds, document.body.firstChild);
16+
}
17+
});

0 commit comments

Comments
 (0)