Skip to content

Commit d64f89f

Browse files
danielmonettellidanielmonettelli
committed
🚀 Implemented Google AdSense integration with customizable ad placements
1 parent 63aabe6 commit d64f89f

File tree

8 files changed

+191
-0
lines changed

8 files changed

+191
-0
lines changed

‎_config.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,15 @@ lang: en
1111
# Change to your timezone › https://kevinnovak.github.io/Time-Zone-Picker
1212
timezone: America/Lima
1313

14+
# Google AdSense configuration
15+
google_adsense: "ca-pub-7596549899792751" # Tu ID de cliente de Google AdSense
16+
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
22+
1423
# jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
1524
# ↓ --------------------------
1625

‎_includes/ad-display.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{% if site.google_adsense %}
2+
<div class="ad-container">
3+
<ins class="adsbygoogle"
4+
style="display:block"
5+
data-ad-client="{{ site.google_adsense }}"
6+
data-ad-slot="{{ include.ad_slot }}"
7+
data-ad-format="auto"
8+
data-full-width-responsive="true"></ins>
9+
<script>
10+
(adsbygoogle = window.adsbygoogle || []).push({});
11+
</script>
12+
</div>
13+
{% endif %}

‎_includes/adsense.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{% if site.google_adsense %}
2+
<!-- Google AdSense Code -->
3+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ site.google_adsense }}" crossorigin="anonymous"></script>
4+
{% endif %}

‎_includes/head-adsense.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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 %}

‎_includes/head-custom.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!-- Inyección de Google AdSense en el head -->
2+
{% include head-adsense.html %}
3+
4+
<!-- Estilos para anuncios -->
5+
<link rel="stylesheet" href="{{ '/assets/css/adsense.css' | relative_url }}">

‎_includes/post-adsense.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{% if site.adsense.enabled and page.ads != false %}
2+
{% if include.location == 'top' %}
3+
<div class="post-ad-top ad-container">
4+
<ins class="adsbygoogle"
5+
style="display:block"
6+
data-ad-client="{{ site.google_adsense }}"
7+
data-ad-format="horizontal"
8+
data-full-width-responsive="true"></ins>
9+
<script>
10+
(adsbygoogle = window.adsbygoogle || []).push({});
11+
</script>
12+
</div>
13+
{% elsif include.location == 'bottom' %}
14+
<div class="post-ad-bottom ad-container">
15+
<ins class="adsbygoogle"
16+
style="display:block"
17+
data-ad-client="{{ site.google_adsense }}"
18+
data-ad-format="horizontal"
19+
data-full-width-responsive="true"></ins>
20+
<script>
21+
(adsbygoogle = window.adsbygoogle || []).push({});
22+
</script>
23+
</div>
24+
{% elsif include.location == 'inline' %}
25+
<div class="post-ad-inline ad-container">
26+
<ins class="adsbygoogle"
27+
style="display:block"
28+
data-ad-client="{{ site.google_adsense }}"
29+
data-ad-format="auto"
30+
data-full-width-responsive="true"></ins>
31+
<script>
32+
(adsbygoogle = window.adsbygoogle || []).push({});
33+
</script>
34+
<div class="ad-separator"></div>
35+
</div>
36+
{% endif %}
37+
{% endif %}

‎_posts/2024-08-01-como-usar-google-adsense-en-tu-blog-jekyll.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Cómo usar Google AdSense en tu blog Jekyll
3+
author: danielmonettelli
4+
date: 2024-08-01 10:00:00 -0500
5+
categories: [Tutoriales, Jekyll]
6+
tags: [jekyll, adsense, blogging]
7+
image:
8+
path: adsense_jekyll_example.png
9+
width: 1200
10+
height: 630
11+
alt: Cómo usar Google AdSense en tu blog Jekyll
12+
---
13+
14+
<p style='font-size: 20px;
15+
color: light-grey; margin: 0px 0px 20px; font-weight: bold; font-style: italic;'>Este post muestra cómo implementar anuncios de Google AdSense en tu blog Jekyll de manera limpia y que no afecte la experiencia de lectura.</p>
16+
17+
---
18+
19+
## Implementando AdSense en tus Posts
20+
21+
Google AdSense es una excelente manera de monetizar tu contenido. En esta publicación veremos cómo añadir anuncios a tus posts de Jekyll de una forma limpia y profesional.
22+
23+
### Anuncio al Inicio del Contenido
24+
25+
Puedes insertar un anuncio al inicio de tu contenido usando el siguiente código. Este anuncio aparecerá justo después del título principal y la introducción:
26+
27+
{% raw %}
28+
```liquid
29+
{% include post-adsense.html location="top" %}
30+
```
31+
{% endraw %}
32+
33+
<!-- Aquí mostramos un ejemplo de anuncio al inicio del contenido -->
34+
{% include post-adsense.html location="top" %}
35+
36+
---
37+
38+
## Configuración de AdSense en Jekyll
39+
40+
Para configurar correctamente AdSense en tu blog Jekyll, debes asegurarte de tener los siguientes elementos:
41+
42+
1. Una cuenta de Google AdSense aprobada
43+
2. Tu ID de cliente añadido en el archivo `_config.yml`
44+
3. Los IDs de slots de anuncios configurados correctamente
45+
46+
### Anuncio en Medio del Contenido
47+
48+
También puedes insertar anuncios entre secciones de tu contenido. Esta es una estrategia efectiva para mejorar los ingresos sin afectar demasiado la experiencia de lectura:
49+
50+
{% raw %}
51+
```liquid
52+
{% include post-adsense.html location="inline" index="1" %}
53+
```
54+
{% endraw %}
55+
56+
<!-- Aquí mostramos un ejemplo de anuncio en medio del contenido -->
57+
{% include post-adsense.html location="inline" index="1" %}
58+
59+
---
60+
61+
## Mejores Prácticas para AdSense
62+
63+
Para optimizar tus anuncios de AdSense en Jekyll, considera estas mejores prácticas:
64+
65+
1. **No sobrecargues de anuncios**: Demasiados anuncios pueden alejar a tus lectores
66+
2. **Ubica estratégicamente**: Coloca anuncios donde naturalmente los usuarios hacen pausas en la lectura
67+
3. **Diseño responsive**: Asegúrate que los anuncios se adaptan a todos los dispositivos
68+
4. **Prueba diferentes formatos**: Experimenta con diferentes tamaños y formatos de anuncios
69+
5. **Respeta las políticas de Google**: Asegúrate de seguir todas las normas de AdSense
70+
71+
### Anuncio al Final del Contenido
72+
73+
Finalmente, puedes añadir un anuncio al final de tu post, justo antes de la sección de comentarios:
74+
75+
{% raw %}
76+
```liquid
77+
{% include post-adsense.html location="bottom" %}
78+
```
79+
{% endraw %}
80+
81+
---
82+
83+
## Conclusión
84+
85+
Implementar Google AdSense en tu blog Jekyll puede ser una excelente manera de monetizar tu contenido. Con la configuración que hemos implementado, los anuncios se mostrarán de manera limpia y profesional, respetando la experiencia de lectura de tus visitantes.
86+
87+
<!-- Aquí mostramos un ejemplo de anuncio al final del contenido -->
88+
{% include post-adsense.html location="bottom" %}

‎assets/css/adsense.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/* Estilos para los contenedores de anuncios */
2+
.ad-container {
3+
text-align: center;
4+
margin: 2rem auto;
5+
overflow: hidden;
6+
max-width: 100%;
7+
}
8+
9+
/* Asegurarse de que los anuncios son responsivos */
10+
.ad-container ins.adsbygoogle {
11+
margin: 0 auto;
12+
}
13+
14+
/* Separador para anuncios en artículos */
15+
.ad-separator {
16+
margin: 2rem 0;
17+
border-bottom: 1px solid #f0f0f0;
18+
}
19+
20+
/* Anuncios en la barra lateral */
21+
.ad-sidebar {
22+
margin-bottom: 2rem;
23+
}

0 commit comments

Comments
 (0)