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:
- 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.
2. From the Menu panel, select Layout, select the area you want to place ads and click Add a Gadget.
3. Click the HTML/Javascript section in the pop-up window. Important: Do not enter a title at this stage.
4. Create your first Gadget for the Head script. Paste the Head Script into the Content section. Move the gadget to the Header section.
GIF 1.
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.
GIF 2.
You may shift or shuffle the cards according to the type of ad code and your preferences.
Option 2 - Using HTML Editor
- Open the Blogger admin panel.
- From the Menu panel, select Theme.
- Select a theme, click on the More arrow icon and choose Edit HTML to view the website template’s code.
GIF 3.
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.
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.
Find the element in the HTML editor, insert the Body Container in the required placement before or after the chosen element.
Click Save in the HTML Editor. MGID widget should begin displaying instantly.
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.