Websites and widgets
      Back to home
      1. Help Center
      2. Publishers
      3. Websites and widgets

      How to install an Adskeeper widget on a platform Blogger

      The Adskeeper installation code for the widget is composed of two parts.

      Part 1. Head Script - Adskeeper preloader that should be placed inside the website <HEAD> section. Script example: 

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

      Part 2. Body Container - the div element that should be placed where the Adskeeper widget should be rendered inside a Blog Post.

      <!-- 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>

      There are two ways to install the widget; let's review each.

      Option 1. Integration process: Layout Builder

      Follow these steps:

      1. Sign in to Blogger and click the down arrow in the top-left corner.
      2. Select the blog where you want to display ads, then click 'Layout' from the left-hand menu.
      3. Choose the area where you want to place ads and click 'Add a gadget.
      4. In the window that appears under "Basics," find HTML/Javascript and click Add. Do not enter a title!
      5. Create a first Gadget for the Head script.
      6. Move a gadget to a Header section.

      ads_blogger_1

      7. Create the second Gadget for the Body container.

      8. Move a Body Gadget where the widget should be shown (for example, below Blog Posts).

      ads_blogger_2

      9. Click Save and check your blog. You may shift or shuffle the cards according to the ad code type and preferences.

      Option 2. Integration process: HTML Editor

      1. Open the Blogger admin panel.
      2. In the right-hand section, select "Theme."
      3. Click the “More” icon on an active theme and select “Edit HTML.”

      ads_blogger_3

      The website template will now be displayed in code view.

      Part 1: Adding Head Script inside page template

      4. Open the search window on the page (Windows, you can use Ctrl + F | macOS, you can use Command + F).

      5. Enter text <HEAD> and find the required element.

      6. Below the element, add a script.

      ads_blogger_4

      Part 2: Adding Body Container inside page template

      7. Identify the location where the widget should be displayed.

      The easiest way to use the browser  “Inspector” is to find the element's name where the Adskeeper widget should be shown.  In our example, we will place a widget right after an article after the section “post-outer”. 

      ads_blogger_5

      8. Find the element in the HTML editor ( same steps as 5,6,7)

      9. Insert the Body Container in the required placement before or after the chosen element. 

      ads_blogger_6

      10. Click Save in the HTML Editor

      ads_blogger_7

      11. The Adskeeper widget should start showing instantly. 

      Note: In some cases, clearing the cache on your end is required.