Continuando con el trabajo en el blog con Gatsby trataremos de integrar los bloques de anuncios de Google Adsense en nuestros artículos.

Una opción relatívamente fácil sería delegar a Google el trabajo, insertar el código de Adsense en la cabecera de la página y decirle a Google que se busque la vida para poner los anuncios donde quiera. El problema de esto es que literal, es lo que hace. Y no siempre terminará arrojando el resultado más profesional posible. Si queremos mostrar los anuncios exáctamente donde queramos tendremos que mancharnos un poquito las manos. Pero no nos preocupemos, será fácil.

Para documentarlo volveremos a partir del Gatsby-starter-blog. Al final de este artículo puedes ver el enlace al repo con todos los cambios aplicados.

A pesar de que es posible insertar código html en las páginas markdown veremos que el código que google nos da al crear un anuncio no parece llevarse bien con Gatsby. En concreto no se lleva bien con React. Por ello tendremos que buscar una forma alternativa de inyectarlo, y esto será creando nuestro propio componente de React y creando una etiqueta que lo represente. De esta forma podremos inyectar el componente simplemente referenciándolo con su etiqueta.

Esto quiere decir, que este tutorial se puede seguir 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 requisito es ir a la consola de Google Adsense y crear un anuncio. En este caso, vamos a crear un anuncio de tipo "in-article", que han sido diseñados específicamente para este escenario. Al hacerlo Google nos devuelve un código como este:

<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, cuidado, porque 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 mostrara 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 cualquiér 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