Types of integration
      Back to home
      1. Help Center Home
      2. Publishers
      3. Types of integration

      MGID Widget Code Installation on the Blogger Platform

      Introduction

      MGID widget code (Simple JS) is a website-level MGID installation code that publishers use to integrate widgets on a website. Unlike standard installation code, the Simple JS tag is designed to be lightweight and efficient. It ensures minimal impact on site performance and avoids extra steps from the publisher's end.

      The widget installation code contains two pieces:

      1. Head Script: This is the MGID preloader that should be placed inside the website <HEAD> section. 

      Example of the script: 

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

      2. Body Container: This is the div element where the MGID widget should be rendered inside a blog post.

      Example of the 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>

      How to integrate MGID widget code (Simple JS) on the Blogger platform

      Option 1 - Using Layout Builder

      1. Sign in to Blogger and click the arrow at the top left of the screen. From the drop-down list, select the blog on which you want to display ads.

      Bloger_add_1

      2. From the Menu panel, select Layout, select the area you want to place ads and click Add a Gadget.

      Bloger_add_2

      3. Click the HTML/Javascript section in the pop-up window. Important: Do not enter a title at this stage.

      Bloger_add_3

      4. Create your first Gadget for the Head script. Paste the Head Script into the Content section. Move the gadget to the Header section.

      Bloger_1

      GIF 1.

      Gif_1_blogger_HEAD_part

      5. Repeat the previous steps to create your second Gadget for the Body container.
      6. Move the Body Gadget to its desired placement(for example, below the blog posts). Click Save and check your blog.

      Bloger_2

      GIF 2.

      Gif_2_blogger_BODY_part

      You may shift or shuffle the cards according to the type of ad code and your preferences.

      Option 2 - Using HTML Editor 

      1. Open the Blogger admin panel.
      2. From the Menu panel, select Theme.
      3. Select a theme, click on the More arrow icon and choose Edit HTML to view the website template’s code.

      Bloger_3

      GIF 3.

      Gif_3_blogger

      4. Add the Head Script inside the page template. 


      Open the search bar on the page (use Ctrl + F on Windows or Command + F on macOS). Enter text <HEAD> and find the required element. Below the required element, add the script. 

      GIF 4.

      Gif_4_blogger

      Bloger_4

      5. Add the Body Container script inside the page template.

      Detect the place where the widget should be visible. The easiest way is to use the browser inspector tool and find the name of the element where the MGID widget should be visible. As an example, we will place a widget after an article and the post-outer section.

      Bloger_5

      Find the element in the HTML editor, insert the Body Container in the required placement before or after the chosen element. 

      Bloger_6

      Click Save in the HTML Editor. MGID widget should begin displaying instantly. 

      Bloger_7

      Gif_5_blogger

      In some cases, clearing the cache on your end is required for the widgets to appear. 

      The widget is now on the page in your desired placement.

      Bloger_8