Cómo insertar y optimizar AdSense en Wordpress para maximizar ingresos
Por favor, no coloques la publicidad a lo loco en tu web porque vas a dejar de ganar mucho dinero. Antes de hacer eso, échale un vistazo a esta guía, en la que te voy a explicar cómo colocar AdSense en tu Wordpress y configurar los bloques de anuncios en tu sitio para optimizar las ganancias. Así mismo, te explicaré como medir los diferentes formatos y descubrir los que más dinero dan.
¡Vamos con ello!
Importante: en algunos casos vamos a ir un poco al límite en la inserción de bloques de AdSense, por lo que debes comprender que las implementaciones las haces bajo tu responsabilidad. En cualquier caso, yo te avisaré cuando hagamos esa configuración delicada y te ofreceré alternativas.
Qué es AdSense y por qué usarlo
AdSense es una plataforma de publicidad de Google que nos permite a los propietarios de sitios web (llamados editores) monetizar nuestro contenido al mostrar anuncios relevantes a los visitantes. Nosotros, los editores, ganamos dinero con cada impresión de estos anuncios, haciendo de AdSense una forma cómoda y eficaz de obtener ingresos a partir del tráfico web.
A día de hoy, AdSense es un sistema de monetización muy atractivo porque es realmente fácil de usar y cómodo, pues solo tienes que colocar un par de códigos y optimizar tus anuncios para empezar a monetizar. Tanto es así, que hay quien llama a este sistema "ingresos pasivos".
En este sentido, y de cara a intentar ser lo más transparente posible, aquí te dejo una gráfico de lo que he generado con AdSense desde que lo empecé a usar bien:
Insertar Google AdSense en WordPress
Una vez te has dado de alta, conectar tu sitio a AdSense es muy sencillo. Solo tienes que ir al menú lateral derecho > Sitios y agregar tu sitio web.
Tras ello, obtendrás un código javascript como el que te muestro abajo, que debes incluir en tu página (te explico más abajo cómo hacerlo). Tras ello, haces clic en He colocado mi código y en Verificar. Finalmente, debes solicitas la revisión de tu página por parte de AdSense.
Vamos con la parte de implementación del famoso código de AdSense, lo cual por cierto es realmente fácil. Y es que, puedes implementar tu código pub de manera manual, a través de un plugin o incluso con tu tema de WordPress.
Insertar AdSense manualmente
Para insertar el código de Adsense manualmente tienes que ir a tu panel de Wordpress > Apariencia > Editor de archivos de temas > Cabecera del tema. Y ahí, justo debajo de la sección <head> tienes que incluir tu código de Adsense.
Insertar AdSense con tu tema de WordPress
Así mismo, existen temas de Wordpress como ASAP Theme que te permite insertar el anuncio fácilmente.
Esto lo puedes hacer a través de Apariencia > Personalizar > Advertising and Analytics Options > Google Analitycs and others. Ahí, en el espacio reservado de <head> debes colocar tu código.
Así mismo, el tema de Wasabi, te permite insertar el código en Apariencia > Personalizar > Monetización: Anuncios > Google Adsense. Como ves abajo, en este caso solo tienes que indicar tu ID de editor (código pub).
Configuración de anuncios manuales en Wordpress
Vamos ahora con la parte de la guía que más miga tiene. Y para ello, lo primero que vamos a hacer es instalar el plugin de Ad Inserter.
Si bien es cierto que temas como ASAP o Wasabi permiten la colocación de bloques de anuncios, yo prefiero Ad Inserter porque me parece más granular y además podemos realizar test AB.
Para instalar este plugin tenemos que ir a plugins > Añadir nuevo plugin y en el buscador escribimos Adinserter. Tras ello, instalamos el desarrollado por Igor Funa y lo activamos.
Una vez instalado ya podemos empezar a configurar nuestros bloques de anuncios. Y para ello, vamos a hacerlo en 3 partes:
- Creamos los bloques en Adsense.
- Implementamos los bloques en WordPress con Ad Inserter.
- Optimizamos su diseño con CSS.
Vamos con cada uno de ellos.
¿Conoces los nichos mejor pagados en Adsense? Aquí te los nombro y te explico cómo atacarlos.
1.- Creación de bloques manuales en Adsense
Para crear un bloque de anuncios, vamos al panel de Adsense > Anuncios y seleccionamos la opción de Por bloque de anuncios. Tras ello, aparecerá una ventana con varios formatos disponibles, donde escogeremos el llamado Anuncio Display.
En la ventana siguiente, simplemente debemos introducir un nombre para el anuncio. Yo aquí te recomiendo una codificación como la siguiente:
Web Ubicación Formato 🠲 Ejemplo: SC H2 336 x 280
En este caso, la codificación sería la siguiente:
- SC: son las iniciales de mi web (SergioCanales).
- H2: es la ubicación (encabezado de tipo H2).
- 336 x 280: es la dimensión del anuncio.
Tras ello, hacemos clic en Crear y nos aparecerá el código que debemos implementar. De toda la información, quiero que te quedes con el campo data-ad-cliente (el código de tu cuenta) y data-ad-slot (el código del bloque).
Tras ello, hacemos clic en Hecho.
Ahora, repite el proceso 2 veces más, el objetivo es crear 3 bloques de anuncios, que serían:
- Bloque de 336 x 280 px debajo de los H2s 🠲 Ejemplo: Web H2 336 x 280
- Bloque con formato rectángulo debajo de los H2s 🠲 Ejemplo: Web H2 rectangle
- Bloque con formato rectángulo debajo del H1 🠲 Ejemplo: Web H1 rectangle
Recuerda apuntar los códigos de los anuncios (aunque luego te explicará como recuperarlos).
Terminada esta parte, vamos con la inserción de los bloques en Adsense.
2.- Insertar bloques de AdSense en WordPress con Ad Inserter
Creados los bloques, vamos a implementarlos en nuestro WordPress. Y para ello, debes tener encuenta que la implementación se hace en base a 3 aspectos:
- Qué formato implementamos (338×280, 300×250, 300×600, etc).
- Dónde lo implementamos (en páginas, entradas, etc).
- En qué zona lo implementamos (debajo del H1, H2, tercer párrafo, etc).
Anuncio debajo de H1
Vamos a insertar el primer bloque de anuncio, y para ello vamos a Ajustes > Ad Inserter. La implementación es, tal y como te muestro abajo (y más abajo te explico en detalle).
Pasos para insertar el bloque de adsense:
Paso 1.- Vamos a Ajustes.
Paso 2.- Vamos a Ad Inserter.
Paso 3.- Seleccionamos el bloque 1 de Ad Inserter.
Paso 4.- Incluimos el código que te indico abajo:
<center>
<!-- Web H1 rectangle-sky -->
<ins class="adsbygoogle rectangle-sky" data-ad-client="ca-pub-XXXXXXXXXXXX" data-ad-slot="YYYYYYYYY" data-full-width-responsive="false"> </ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>- En la sección ca-pub-XXXXXXXXXXXX debes cambiar las XXXX por tu código de cuenta.
- En la sección de YYYYYYYYY debes cambiar las YYY por tu bloque de anuncio.
Si no apuntaste los códigos que te dije, puedes recuperarlos yendo a Anuncios > Por bloque de Anuncios, busca tu bloque y haz clic en el icono del código <>.
Paso 5.- Indicamos donde queremos que aparezca. En mi caso he marcado páginas porque solo trabajo con páginas en Wordpress, pero si tú trabajas con entradas, márcalas.
Paso 6.- Indicamos la sección en la que queramos que aparezca, en este caso después del elemento H1. No obstante, aunque esta ubicación es buena, te aconsejo analizar en un futuro la métrica Active View, ya que hay veces que es realmente baja y empeora las ganancias.
Anuncios debajo de H2
Vamos a implementar los anuncios debajo de los encabezados H2, para lo cual vamos a implementar un test AB.
Y si no quieres problemas, colócalos encima del H2 con una etiqueta de anuncio en lugar de debajo.
Básicamente, aquí la idea es probar 2 formatos de anuncios y ver con el tiempo cual funciona mejor. Para ello tenemos que crear un Test A/B en Ad Inserter, con el formato siguiente:
[ADINSERTER ROTATE name="Adsense A" share="50"]
Anuncio 1
[ADINSERTER ROTATE name="Adsense B" share="50"]
Anuncio 2En el campo share es donde indicamos el porcentaje de veces que aparezca cada bloque. Por defecto está a 50, para que cada uno aparezca un 50% de las veces, pero puedes configurar un 30/70, 40/60, etc.
Y su implementación sería la siguiente:
Vamos a verla paso a paso:
Paso 1.- Vamos a Ajustes.
Paso 2.- Vamos a Ad Inserter.
Paso 3.- Seleccionamos el bloque 2 de Ad Inserter.
Paso 4.- Incluimos el código que te indico abajo.
[ADINSERTER ROTATE name="Adsense A" share="50"]
<center>
<!-- Web H2 336 x 280 -->
<ins class="adsbygoogle f-336-280" data-ad-client="ca-pub-XXXXXXXXXXXX" data-ad-slot="YYYYYYYYY" data-full-width-responsive="false"> </ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
[ADINSERTER ROTATE name="Adsense B" share="50"]
<center>
<!-- Web H2 rectangle -->
<ins class="adsbygoogle rectangle" data-ad-client="ca-pub-XXXXXXXXXXXX" data-ad-slot="YYYYYYYYY" data-full-width-responsive="false"> </ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>De nuevo:
- En la sección ca-pub-XXXXXXXXXXXX debes cambiar las XXXX por tu código de cuenta.
- En la sección de YYYYYYYYY debes cambiar las YYY por tu bloque de anuncio.
Paso 5.- Indicamos donde queremos que aparezca. En mi caso he marcado entradas, para variarlo un poco pero, de nuevo, marca entradas y/o páginas.
Paso 6.- Indicamos la sección dentro de cada URL en la que queramos que aparezcan los bloques. En este caso, debajo de cada H2. Y para ello, tenemos que hacer la siguiente configuración:
Fíjate en la jugada de arriba. Con esta configuración estamos indicando que después del párrafo 3,5,7,9,11 (por ejemplo) inserte nuestros anuncios. Y más abajo, indicamos que sean párrafos que contengan la etiqueta html H2.
De esta forma estaremos configurando los anuncios debajo del tercer, quinto, séptimo, noveno y undécimo H2 (aquí indica tú los que quieras).
3.- Optimización del diseño con CSS
Quizá no te hayas fijado, pero al insertar los anuncios con Ad Inserter, he incluido una clase adicional en cada uno de los 3 bloques.
- Para el bloque H1 he creado la clase rectangle-sky.
- Para el primer bloque H2 he creado la clase f-336-280.
- Para el segundo bloque H2 he creado la clase rectangle.
Esto lo he hecho para definir el estilo a nivel de tamaño que va a tener cada uno de esos 3 bloques. Para implementar esto, vamos a Apariencia > Personalizar y en tu tema busca la opción de CSS adicional.
El código es el siguiente:
/* INICIO PERSONALIZAR ADSENSE */
.f-336-280{display:block;width:336px;height:280px;}
.rectangle{display:block;height:300px;}
.rectangle-sky{display:block;height:300px;}
@media (max-width: 991px) {.rectangle-sky{display:inline-block;width:300px;height:600px;}}
/* FIN PERSONALIZAR ADSENSE */
Y ahora te explico lo que estamos haciendo:
- Para la clase f-336-280 estamos indicando que el espacio reservado tiene un ancho de 336 px y un alto de 280px
- Para la clase rectangle estamos indicando que el espacio reservado tiene un ancho de completo y un alto de 300px
- Para la clase rectangle-sky tenemos 2 condiciones implementadas con una media query:
- En el caso de ordenador (a partir de 991 px) tenemos un espacio reservado exactamente igual que con el bloque anterior.
- En el caso de móvil (inferior a 991 px) tenemos un espcio reservado con un ancho de 300px y un alto de 600px. Esto es para forzar que aparezca el anuncio llamado Sky Scrapper y que tanto dinero da.
Mejores ubicaciones para los bloques de Adense
Existen muchas teorías sobre los mejores lugares para ubicar los anuncios de AdSense, pero si yo tuviera que decir cuáles me han funcionado mejor, sin ninguna duda, diría debajo del H1 y debajo de los H2.
Debajo del H1 funcionan bastante bien pero debes tener en cuenta que hay veces que no da tiempo a que se muestre el anuncio porque el usuario ya ha hecho scroll (sobre todo en móvil). Es por eso que tienes que tener en cuenta la métrica de Active View.
Por otro lado, de cara a colocarlos debajo de los H2s, tienes que tener cuidado. Yo, de hecho, he tenido alguna penalización, tanto en webs de descargas como de tipo directorio por colocarlo debajo de los H2. También he de decir que las penalizaciones me han venido en webs que daban más de 2.000€ al mes. Con web de menos ingresos nunca he tenido problemas.
Otra opción interesante es cerca de las imágenes ya que me mucha gente hace clic en ellas para ampliarlas, especialmente si son descriptivas, como una infografía o la imagen de un tutorial con flechas verdes indicando puntos clave.
Descubre las ubicaciones con Ad Inserter
Bien aconsejado por David Rodriguez, añado una sección adicional en la que te explico como encontrar las posiciones dentro de tus páginas con Ad Inserter. Esto lo puedes hacer con la función de Mostrar posiciones, la cual te indica en recuadros de colores cada una de las posiciones que puedes configurar en el paso de 2 de la inserción de anuncios en Wordpress.
Para ello, solo tienes que ver tu página (estando logeado) e ir a Ad Inserter > Mostrar posiciones. Además, si ya tienes los anuncios configurados, puedes ver la ubicación de dichos bloques.
En el momento de seleccionar esta opción, aparecerán etiquetas como "Antes del párrafo 1", "Antes de la Imagen 1" o "Después de contenido". Y esto es realmente valioso cuando descubres esas 2 ó 3 páginas que más dinero dan y quieres hacer una inserción de anuncios específica en dicha página.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Configuración de anuncios automáticos
Para que los anuncios configurados manualmente en WordPress no se pisen con los que mete AdSense de manera automática, tenemos que hacer también una configuración en la parte de los anuncios automáticos.
Para configurarlo, en Adsense vamos primero al panel principal de Adsense:
Y tras ello, tenemos que ir a Anuncios > Por sitio, buscar tu web y hacer clic en el lápiz de la derecha.
En este momento, nos aparecerá una pantalla con una previsualización de nuestro sitio web en formato móvil, la cual podemos cambiar a ordenador.
No obstante, lo importante aquí es el panel que tenemos a la derecha, ahí es donde vamos a configurar el único anuncio automático de Adsense que nos interesa activar.
Para ello, lo primero es activar los anuncios automáticos, haciendo clic en el toggle llamado Anuncios automáticos (se tiene que poner azul). Y después, debemos ir a la sección de Formatos superpuestos.
Así mismo, en la sección de Formatos superpuestos, debemos marcar solo el Anuncios viñeta y en Frecuencia de los anuncios viñeta, indica que aparezcan cada 10 minutos.
Tras ello, volvemos a la pantalla anterior y en la sección de Formatos in-page, desmarcamos los 2 tipos de formatos indicados:
- Anuncios banner.
- Anuncio multiplex.
El anuncio de búsqueda relacionada márcalo porque tiene un RPM enorme. Si no lo conoces, éste es un bloque que aparece en tu contenido automáticamente, mostrándote una serie de enlaces estrechamente relacionados con la temática de tu web.
Tras ello, volvemos a la pantalla anterior y hacemos clic en Aplicar al sitio.
Informe de resultados del Test AB
Pasado un mes de la configuración de AdSense en Wordpress (más o menos), te aconsejo ver tus bloques de anuncios y detectar cuál de los 2 te ha funcionado mejor.
Para ello, debes ir a tu panel de Adsense > Informes > Bloques de anuncios, y seleccionar el reporte de los últimos 30 días (por defecto está a 7 días).
Tras ello, busca tus bloques de anuncios y compara. Como el test AB lo has hecho al 50%, fíjate en los ingresos estimados y cual de ellos da más dinero. Así mismo, te aconsejo fijarte en el RPM de la web, especialmente si el test no es al 50%, ya que te va a indicar cuánto dinero ganas por cada mil impresiones de anuncios con ese bloque.
y, dividiéndolos por el número total de impresiones y luego multiplicando ese resultado por 1000 (aquí te explico en más detalle qué es el RPM en AdSense).Una vez analizados los resultados, puedes cambiar la configuración para que el que dé más dinero aparezca un 70% de las veces y el que menos, un 30%.
O quitar el que menos dinero da si la diferencia es muy grande. Así mismo, puedes probar otro tamaño de anuncio en tu test AB.
Consejos para optimizar Adsense en WordPress
Y ya para terminar, aquí te dejo una serie de consejos de cara a la implementación de los anuncios en tu web.
- Nada más colocar los anuncios en tu web es probable que todavía no aparezcan. Dales tiempo porque es normal, hasta que no pasen un par de semanas no estará todo estable.
- Cuando hagas test A/B hazlo como mínimo durante un mes para tener información real.
- No te vuelvas loco o loca haciendo tests.
- La métrica RPM es muy valiosa para tomar decisiones pero ten presente que con pocas impresiones estará distorsionada. Tenla en cuenta a partir de las 1.000 impresiones.
- Cuando detectes que una o varias páginas dan mucho dinero (llamadas money pages) haz una configuración personalizada de anuncios en cada una de ellas. Para ello, puedes usar herramientas como Hotjar, que te crea mapas de calor con los lugares en los que el usuario hace clic.
- Si detectas en GSC que tienes URLs que te traen mucho tráfico analiza si te dan dinero o no, porque puedes usarlas para derivarlas hacia las que sí te lo dan. Para ello, puedes analizar los clics o impresiones en Google Search Console.
- No olvides colocar el archivo ads.txt de AdSense en tu web. Para ello solo tienes que ir con el administrador de archivos a la ruta raíz y colocarlo.
- Recuerda tener cuidado con los anuncios debajo de los H2. Una alternativa que yo he probado es colocarlo encima de los H2, (así me quité la penalización). Obviamente baja el RPM pero duermo más tranquilo.
- Ad Inserter te de la opción de excluir páginas de la configuración global de anuncios. Para ello, tienes que ir Listas > URLs e incluir las URLs en las que no quieres que aparezcan los anuncios (como las páginas legales)
- Ad Inserter te da la opción de marcar los anuncios con un etiqueta de anuncios. Para ello, tienes que ir a tu bloque de anuncios, seleccionar la opción de Varios y ahí la etiqueta de anuncios.
Y con esto ya hemos terminado la guía para insertar AdSense en Wordpress, espero que te haya gustado y te haya sido de gran utilidad. Llegados a este punto, solo me queda decirte que si quieres seguir ampliando conocimiento, es el momento de empezar el curso de Bruno Ramos.
Ciao!!
Optimizar AdSense de cara al WPO
Como todos sabemos, el hecho de incluir AdSense en nuestra web ralentiza su tiempo de carga. Esto lo notarás porque en Page Speed te aparecerán mensajes del tipo:
- Publica imágenes con formatos de nueva generación.
- Evita usar JavaScripts antiguos en navegadores modernos.
- Usa una politica de caché eficaz
- Elimina los recursos que bloqueen el renderizado.
Por lo tanto, no solo tendemos que optimizarlo en lo que a ingresos se refiere, sino también en lo que al WPO (Web Performance Optimization) atañe.
Para ello, podemos usar varios plugins. Yo uso Perfmatters ya que es mi favorito para la optimización de los tiempos de carga, pero también existe la posibilidad de usar WP Rocket.
Vamos a ver los 2.
Optimizar scripts de AdSense con Perfmatters
Con este plugin lo que hacemos básicamente es optimizar el JavaScript ya que retrasamos su ejecución hasta que se produzca una acción por parte del usuario, mediante la funcionalidad de Delay.
Para implementar esto, tienes que ir a Perfmatters > Assetes > Delay JavaScript e introducir el archivo adsbygoogle.js, tal y como te muestro abajo:
Optimizar scripts de AdSense con WP Rocket
Con WP Rocket también podemos mejorar los tiempos de carga de AdSense. Además, su interfaz es un poco más amigable ya que solo hay que clicar en Google AdSense, dentro de la opción de Retrasar la ejecución de JavaScript.
Optimizar AdSense con ASAP
Actualmente, la nueva versión de Asaptheme también permite optimizar AdSense desde le propio panel de WordPress. Para ello, tienes que ir al panel del plugin > Rendimiento > Optimizar JS y ahí seleccionas la opción de Optimizar Google AdSense.
En este caso, y a diferencia de Perfmatters o WP Rocket, no solo retrasa la ejecución de la llamada JavaScript (Delay), sino que también aplica una precarga de los recursos necesarios (Preload) para que tarden menos al ser llamados
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!