Instalación del Código del Widget de MGID en la Plataforma Blogger

Introducción

El código del widget de MGID (Simple JS) es un código de instalación de MGID a nivel de sitio web que los editores usan para integrar widgets en sus sitios. A diferencia del código de instalación estándar, el código Simple JS está diseñado para ser ligero y eficiente. Asegura un impacto mínimo en el rendimiento del sitio y evita pasos adicionales por parte del editor.

El código de instalación del widget contiene dos partes:

  1. Head Script: Este es el precargador de MGID que debe colocarse dentro de la sección <HEAD> del sitio web.

Ejemplo del script:

<script src="https://jsc.mgid.com/site/123456.js" async></script>

2. Body Container: Este es el elemento div donde el widget de MGID debe ser renderizado dentro de una publicación del blog.

Ejemplo del script: 

<!-- place in the body --> 
<div data-type="_mgwidget" data-widget-id="1464221"></div>
<script>
(function(w,q){w[q]=w[q]||[];w[q].push(["_mgc.load"])})(window,"_mgq");
</script>

Cómo integrar el código del widget de MGID (Simple JS) en la plataforma Blogger

Opción 1 - Usando el Layout Builder

1.  Inicie sesión en Blogger y haga clic en la flecha que se encuentra en la parte superior izquierda de la pantalla. En la lista desplegable, seleccione el blog en el que desea mostrar anuncios.

Bloger_add_1

2. En el panel de Menú, seleccione Layout, seleccione el área donde quiere colocar los anuncios y haga clic en Add a Gadget.

Bloger_add_2

3. Haga clic en la sección HTML/JavaScript en la ventana emergente. Importante: No ingrese un título en esta etapa.

Bloger_add_3

4. Cree su primer Gadget para el Head script. Pegue el Head Script en la sección de Contenido. Mueva el gadget a la sección del Header.

Bloger_1

GIF 1.

Gif_1_blogger_HEAD_part

5. Repita los pasos anteriores para crear su segundo Gadget para el Body container.
6. Mueva el Gadget del Body a su ubicación deseada (por ejemplo, debajo de las publicaciones del blog). Haga clic en Guardar y revise su blog.

Bloger_2

GIF 2.

Gif_2_blogger_BODY_part

Puede mover o reorganizar los gadgets según el tipo de código de anuncio y sus preferencias.

Opción 2 - Usando el Editor de HTML

  1. Abra el panel de administración de Blogger.
  2. En el panel de Menú, seleccione Theme.
  3. Seleccione un tema, haga clic en el icono de Más opciones y elija Edit HTML para ver el código de la plantilla del sitio web.

Bloger_3

GIF 3.

Gif_3_blogger

4. Agregue el Head Script dentro de la plantilla de la página.

Abra la barra de búsqueda en la página (use Ctrl + F en Windows o Command + F en macOS). Ingrese el texto <HEAD> y encuentre el elemento requerido. Debajo del elemento requerido, agregue el script.

GIF 4.

Gif_4_blogger

Bloger_4

5. Agregue el script del Body Container dentro de la plantilla de la página.

Detecte el lugar donde el widget debe ser visible. La forma más fácil es usar la herramienta de inspección del navegador y encontrar el nombre del elemento donde el widget de MGID debe ser visible. Como ejemplo, colocaremos un widget después de un artículo y la sección post-outer.

Bloger_5

Encuentre el elemento en el editor de HTML, inserte el Body Container en la ubicación requerida antes o después del elemento elegido.

Bloger_6

Haga clic en Guardar en el Editor de HTML. El widget de MGID debería comenzar a mostrarse de inmediato.

Bloger_7

Gif_5_blogger

En algunos casos, es necesario borrar el caché para que los widgets aparezcan.

Bloger_8