Logos de Google Adsense y Gatsby
vlone.es
Volver al índice

Cómo Insertar Anuncios de Google Ads en Blogs con Gatsby Remark

2023, Jan 26

Continuando con el desarrollo de nuestro blog en Gatsby, en esta ocasión nos enfocaremos en la integración de los bloques de anuncios de Google Adsense en nuestros artículos.

El Enfoque Alternativo para una Integración Controlada

Una opción sencilla sería simplemente delegar el trabajo a Google, insertando el código de Adsense en la cabecera de la página y dejar que el sistema de Google coloque los anuncios donde considere conveniente. Sin embargo, esta solución puede no ofrecer siempre el resultado más profesional. Si queremos tener un mayor control sobre la ubicación de los anuncios, necesitaremos realizar algunos ajustes adicionales. Afortunadamente, no será complicado.

Para documentar este proceso, partiremos del Gatsby-starter-blog. Al final de este artículo, encontrarás el enlace al repositorio con todos los cambios aplicados.

Aunque es posible insertar código HTML en las páginas Markdown, veremos que el código proporcionado por Google Adsense al crear un anuncio puede no ser totalmente compatible con Gatsby, especialmente con React. Por lo tanto, buscaremos una forma alternativa de inyectar el código, lo cual lograremos creando nuestro propio componente de React y usando una etiqueta personalizada para representarlo. De esta manera, podremos inyectar el componente simplemente haciendo referencia a la etiqueta.

Es importante mencionar que este tutorial puede aplicarse para inyectar cualquier código o componente React que diseñemos.

Vamos al lío.

Obtener el Código de la Consola de Google Adsense

El primer paso es acceder a la consola de Google Adsense y crear un anuncio. En este caso, seleccionaremos un anuncio de tipo "in-article", diseñado específicamente para este escenario. Una vez creado, Google nos proporcionará un código similar al siguiente:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="YYYYYYYYYY"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Incluir el script de Google Syndication

Esta será la parte más sencilla, ya que existe un plugin con el que podemos insertar este script en todas las páginas automáticamente.

Para ello, instalaremos gatsby-plugin-google-adsense.

  npm install gatsby-plugin-google-adsense

Y a continuación, añadiremos en gatsby-config.js el plugin, especificando nuestro código ca-pub.

  plugins: [
    {
      resolve: `gatsby-plugin-google-adsense`,
      options: {
        publisherId: `ca-pub-XXXXXXXXXXXXXXXX`
      },
    },
    ...

Crear un componente

A continuación, crearemos un componente React que genere dicho código. Pero ojo, para ello, deberemos escapar ciertos caracteres. El elemento ins del anuncio anterior se convertirá en:

  <ins class="adsbygoogle"
      style={{ display: 'block', textAlign: 'center' }}
      data-ad-layout="in-article"
      data-ad-format="fluid"
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="YYYYYYYYYY">
  </ins>

Como vemos, debemos tener cuidado, ya que hay pequeños cambios en el elemento style.

Y el script que hace el push lo implementaremos como parte del componente de forma ligeramente diferente.

De forma que el componente quedará así:

src/components/InArticleAdComponent.js

import React from 'react';

export default class InArticleAdComponent extends React.Component {
  componentDidMount () {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }

render () {
    return (
        <ins class="adsbygoogle"
            style={{ display: 'block', textAlign: 'center' }}
            data-ad-layout="in-article"
            data-ad-format="fluid"
            data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
            data-ad-slot="YYYYYYYYYY">
        </ins>
    );
  }
}

Instalar los plugins

En la plantilla donde vayamos a querer inyectar este componente, tendremos que hacer ciertas modificaciones.

En primer lugar, deberemos instalar los componentes gatsby-remark-component y rehype-react.

npm install gatsby-remark-component rehype-react

E incluir gatsby-remark-component como un plugin de gatsby-transformer-remark en el fichero gatsby-config.js.

  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        "gatsby-remark-component",
        ...
      ],
    },
  },
  ...

Identificar el mapeo de etiqueta a componente

Con los plugins instalados, el siguiente paso es cambiar la plantilla para inflar el componente cuando lo encuentre. Para ello, deberemos importar nuestro nuevo componente y el componente rehype-react.

import rehypeReact from "rehype-react"
import InArticleAdComponent from "../components/InArticleAdComponent"

Una vez importados, definiremos el mapeo que reemplazará en nuestro caso el elemento <in-article-ad-component></in-article-ad-component> por el componente InArticleAdComponent.

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: { "in-article-ad-component": InArticleAdComponent }
}).Compiler

Inflar el componente

A partir de este momento, ya no podremos utilizar el habitual dangerouslySetInnerHTML refiriéndonos al contenido HTML que remark ha generado para nosotros. Deberemos utilizar htmlAst.

Para ello, actualizaremos la query de GraphQL para recuperar también el elemento htmlAst.

markdownRemark(fields: { slug: { eq: $slug } }) {
  id
  excerpt(pruneLength: 160)
  html
  htmlAst
  ...

Y modificaremos aquellos puntos del template donde se mostrará el HTML para que utilice htmlAst tras pasarlo por nuestro código renderAst.

Eliminar:

<div dangerouslySetInnerHTML={{ __html: post.html }} />

Y reemplazarlo por:

<div>{renderAst(post.htmlAst)}</div>

Conclusión

Una vez hechos estos cambios, en cualquier página donde se utilice esa plantilla, cada vez que incluyamos en el Markdown el código <in-article-ad-component></in-article-ad-component>, este será reemplazado por:

<div>
  <ins 
    class="adsbygoogle" 
    data-ad-layout="in-article" 
    data-ad-format="fluid" 
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" 
    data-ad-slot="YYYYYYYYYY" 
    style="display: block; text-align: center;">
  </ins>
</div>

Puedes ver el código completo en esta rama de mi repo de ejemplos de Gatsby juanlugm/gatsby-starter-blog-samples/tree/googleads