Ahora le toca el turno a la publicidad. Cómo añadir Google Adsense a tus artículos AMP de WordPress, sin utilizar plugins de terceros o conversores.

Es tan sencillo como disponer de los códigos que te da Google Adsense. En el momento que creas tu bloque de anuncios. Y pegarlo en un lugar más correcto para los diferentes validadores AMP.

En el anterior caso hablé sobre Cómo añadir Google Analytics a AMP sin plugins. Próximamente lo actualizaré para aprobar cualquier validador AMP.

Hemos de tener en cuenta que utilizo el plugin AMP para estandarizar todo de un plumazo. Sin necesidad de saber lenguajes de programación. Es un requisito para integrar el bloque de anuncios ya que lo integraremos en él.

Y por otra parte, también tengo integrado el plugin Glue para personalizar el diseño. Aunque no es necesario para esta ocasión.

Estos son los pasos que seguiremos:

Generar los bloques de anuncios con Google Adsense

Creo que esto es muy sencillo y todos lo conocemos. Nos dirigimos a nuestro dashboard de Google Adsense para ir a la sección:

Mis anuncios ⇒ Bloques de anuncios ⇒ Nuevo bloque de anuncios

Seleccionamos la opción de anuncio Anuncios de texto y de display.

Seguidamente el nombre que le queramos asignar. El tamaño del anuncio es obligatorio que sea Adaptable.

Y el resto de características las podéis dejar por defecto. Si lo preferís, podéis añadir un criterio de seguimiento.

Clic en Guardar y obtener el código. De este código sólo necesitaremos guardar estos datos:

data-ad-client=»ca-pub-1234567890»
data-ad-slot=»0987654321«

Adaptar los bloques de anuncios a AMP

En esta sección, Google recomienda que según donde posicionemos el anuncio, elijamos un bloque de anuncios con una personalización diferente.

Y siguiendo esta recomendación, este será el código final del bloque de anuncios de Google Adsense para la versión en AMP de WordPress de la parte superior:

<amp-ad
layout=»fixed-height»
height=100
type=»adsense»
data-ad-client=»ca-pub-1234567890»
data-ad-slot=»0987654321«;
</amp-ad>

El resultado final es muy sencillo y reducido, que podéis ampliar y complicaros la vida con muchos más elementos AMP.

Si os fijáis, utilizamos los 2 códigos que extrajimos del original que nos mostró Google Adsense.

También hemos utilizado los valores layout y height para fijar unas dimensiones que no generen problemas en resoluciones estándares y que también recomienda Google.

Ahora es el turno para conocer el código final del bloque de anuncios de Google Adsense para la versión AMP de WordPress de la parte inferior:

<amp-ad
layout=»responsive»
width=300
height=250
type=»adsense»
data-ad-client=»ca-pub-1234567890»
data-ad-slot=»0987654321«>
</amp-ad>

Como en el anterior caso, hemos reutilizado los códigos de Google Adsense que identifican al cliente y al bloque de anuncios específico.

Por otra parte, hemos usado el layout, width y height para establecer unas medidas los más rentables.

Insertar el bloque de anuncios AMP en el apartado superior adaptado

Para integrar este código existen dos formas:

  1. A través del propio Dashboard de WordPress.
    1. Clic en Plugins ⇒ Editor
    2. Elegir el plugin a editar: AMP y clic en Elegir
    3. En la barra derecha, clic en templates ⇒ single.php
  2. A través de una conexión FTP o administrador de archivos del CPanel del hosting.
    1. Localizando el directorio que por defecto es /public_html/wp-content/plugins/amp/templates
    2. Abrir para editar single.php

Buscamos <body> y posteriormente <article> para introducir el código justamente después. Quedaría tal que así:

<body class="...>
...
<article class="amp-wp-article">
 
 <amp-ad
 layout="fixed-height"
 height=100
 type="adsense"
 data-ad-client="ca-pub-1234567890"
 data-ad-slot="0987654321">
 </amp-ad>
...

Y pulsamos en Guardar. Recuerda refrescar el plugin para caché y el propio caché del navegador para verlo a posterior.

Insertar el bloque de anucios AMP en el apartado inferior adaptado

Para integrar este código existen dos formas:

  1. A través del propio Dashboard de WordPress.
    1. Clic en Plugins ⇒ Editor
    2. Elegir el plugin a editar: AMP y clic en Elegir
    3. En la barra derecha, clic en templates ⇒ single.php
  2. A través de una conexión FTP o administrador de archivos del CPanel del hosting.
    1. Localizando el directorio que por defecto es /public_html/wp-content/plugins/amp/templates
    2. Abrir para editar single.php

Buscamos <body> y posteriormente <footer> para introducir el código justamente después. Quedaría tal que así:

<body class="...>
...

<footer class="amp-wp-article-footer">
 ...
</footer>
 
 <amp-ad
 layout="responsive"
 width=300
 height=250
 type="adsense"
 data-ad-client="ca-pub-1234567890"
 data-ad-slot="0987654321">
 </amp-ad>
...

Y pulsamos en Guardar. Recuerda refrescar el plugin para caché y el propio caché del navegador para verlo a posterior.

Utilizar validador AMP de Google

Después de haber realizado todo esto para añadir Google Adsense a tus artículos AMP de WordPress, ahora únicamente tendremos que validar que el anuncio se muestre correctamente en los lugares donde lo hemos indicado.

Quizás hemos de esperar algunos minutos hasta que Google Adsense comienza a mostrar anuncios.

Mientras podemos comenzar con el validador propio de Google de AMP.

introduce la url exacta con el valor final /amp/ para ver dicha versión y espera los resultados. Si todo es correcto, aprovecha para enviársela a Google y que la indexe en los resultados de búsqueda.

De lo contrario, te dará indicaciones muy claras de dónde has podido cometer algún fallo.

También existe otro validador del propio AMP Project mucho más detallista a la hora de analizar tu artículo.

Y por último, el plugin para Chrome oficial de AMP Project para validar en tiempo real.

Resultados de añadir Google Adsense a tus artículos AMP de WordPress

Esta ha sido una manera muy sencilla y sin necesidad de tener conocimiento técnicos de cómo poder integrar la publicidad esencial en tu web o blog basado en WordPress sin tener que instalar más plugins pesados o esperar a que desarrollen el plugin perfecto.

Google indexará todas las páginas en sus versiones AMP en los resultados de búsqueda. Esto te repercutirá directamente en la mejora de visitas, sobretodo, de dispositivos móviles. Los cuáles y bajo mi experiencia, son los que mejores resultados te darán 😉

Si tenéis dudas o no conseguís poner la publicidad de Google Adsense en vuestros sites, podéis dejarlo en los comentarios.

Y si os he sido de ayuda, podéis invitarme a una copa o ayudarme aportando a mi patreon 😀 para futuros artículos!

Actualización

Algunos usuarios me habéis preguntado por la automatización de los anuncios en las páginas AMP y tras revisar hoy las novedades de Google Adsense para un cliente, aquí tenemos la tan esperada opción.

Para activar la publicidad en AMP, una vez en el dashboard de Google Adsense, no dirigimos a Mis anuncios → Contenido → Anuncios automáticos y en este apartado nos vamos a la pestaña de Anuncios automáticos para AMP.

Aquí seguimos los 3 pasos que nos describen y et voilà!

Yo estoy comprobando su rendimiento de estos automáticos y por ahora el rendimiento es bastante inferior a los estáticos que explico en este artículo… veremos con el tiempo…

Publicado por José Andrés Noguera Muñoz

Product Owner & Advisor feliz, regando pequeños brotes para ayudarlos a crecer hasta convertirlos en grandes sequoias del sector #legaltech.

Únete a la conversación

4 comentarios

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

  1. Hola, con la actualizacion a automatización de los anuncios en las páginas AMP yo uso el plugin AMPforWP y no se como poner el codigo automatico, ya lo puse segun en su header que treae el tema ese pero nomas no encuentro como y en sus ads que ellos poinen esta muy cutre

    1. Hola Luis,

      Mi recomendación es que para habilitar AMP en WordPress utilices el plugin AMP for WordPress.

      Y si lo que quieres es añadir publicidad en las páginas AMP de tu WordPress, Google Adsense ya ofrece un código especializado para este fin. Mi recomendación es que insertes el código que te genera Google Adsense y también experimentes con cuadros de anuncios en diferentes localizaciones. Se auto gestionan para na incumplir las normas de Google Adsense.

      Si necesitas ayuda con AMP for WordPress, AMPforWP o la integración de los anuncios de Google Adsense y no te es suficiente consultar a la comunidad, te puedo ofrecer mi ayuda.
      Contáctame por el formulario y hablamos 😉

  2. Hola se pueden colocar los anuncios en automático, como AMP? Cómo, no encuentro el ad slot, solo aparece en bloques de anuncios. Gracias

    1. Hola José María,

      Yo solo he conseguido incrustarlo de manera estática.
      El ad-slot lo puedes encontrar en el momento que creas el bloque en el dashboard de Google Adsense.

      ¡Actualizo mi comentario José María! Ya puedes hacerlo en modo automático! Revisa la actualización final de este mismo artículo 😉

      Saludos!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies