Uno de los problemas al trabajar con el excelente framework para FrontEnd Vue.js es insertar bloques de publicidad Adsense. El error reside básicamente en que no puedes insertar códigos que contengan la etiqueta <script> dentro de tu «#app».
Existen al menos dos soluciones o paquetes en NPM que te lo solucionan (Vue-Adsense-1 y Vue-Adsense-2). Sin embargo analizando el código fuente de cualquiera de ellas, realmente no merece la pena utilizarlo. Es más simple crear un pequeño componente tú mismo en unos 3-4 minutos:
En resumen lo único que tienes que hacer es añadir la librería de google adsense en el index.html de tu app, entre etiquetas <head> o al final pero antes de </body> sin incluirlo dentro del #root element de la app Vue.js.
|
1 |
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> |
Crear nuestro componente adsense con un código extremadamente simple, que puedes encontrar aquí. Posteriormente registrar el componente como cualquier otro en nuestra aplicación y utilizarlo de esta forma:
|
1 2 3 4 5 |
<adsense ad-slot="XXXXXXX" ad-format="auto" ad-client="ca-pub-XXXXXXXXXX" ad-style="display:block"></adsense> |
De hecho ahí reside uno de los beneficios en usar Vue.js para frontend, obtienes un componente simple altamente personalizable que puedes reutilizar en cualquier parte de tu aplicación escribiendo una línea.
Casi todas las variables o props puedes establecer por defecto, ya que casi siempre el bloque de publicidad suele ser muy parecido, por lo que el código a incluir puede ser simplemente «<adsense></adsense>«.
Es decir, la mayoría de los bloques de publicidad comparten tu ID de cliente, el formato e incluso estilo…
