【Blogger】記事中にアドセンスの記事内広告を自動で追加する-すたすた式

記事の中にアドセンスの記事内広告を自動で追加するJavaScriptです。

いままでBloggerの記事中にアドセンス広告を自動表示する[忙しい人向け]-スケ郎のお話を使わせていただいていましたが、自分でも書いてみることにしました。

追記（2023年10月11日）：広告のラベル表示付きのJavaScriptを追加しました。

広告のラベル表示について広告のラベル表示 - Google AdSense ヘルプ

はじめに
コード
- adsbygoogleScriptについて
- CSS
補足
追記
- indexOfをincludesに変更
- document.querySelectorをBlog1.querySelectorに変更

はじめに

元となるアドセンスの記事内広告のコードはこんな感じです

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

これを便宜的に大きく3つのブロックに分けて名前を付けました。

adsbygoogleScript

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"crossorigin="anonymous"></script>

insElm

<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>

pushScript

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

adsbygoogleScriptはテンプレート内に1個あればよく、すでに設置してあることと思います。

こちらの質問の回答が参考になりました。

購入サイト状態を確認した所、アドセンスのスクリプト（adsbygoogle.js）がページ内で3回読み込まれています。PV数が3倍計測されているのではと考えています。その考えは合っていますでしょうか？ - Google AdSense コミュニティ

したがって、残りのinsElmとpushScriptを指定したh2要素の上に生成します。

（一応、adsbygoogleScriptも生成できるようにしてあります。）

HTMLを編集します。必ずバックアップを取ってから作業してください。

コード

（2022年11月10日タイプミス修正）

記事内広告を自動で追加するJavaScript：クリックすると開きます

<b:if cond='data:view.isSingleItem'>
<script>
// Blogger用
//<![CDATA[
(() => {
  const inarticleAds = (nthHeading) => {
    // 記事内広告が入るaside要素を生成
    const inarticleAdswrapper = document.createElement("aside");
    // class in-article-adsを付与
    inarticleAdswrapper.className = "in-article-ads";
    /*
    // adsbygoogle.jsのスクリプト要素を生成
    const adsbygoogleScript = document.createElement("script");
    adsbygoogleScript.async = true;
    adsbygoogleScript.src =
      "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"adsbygoogleScript.crossorigin = "anonymous";
    */

    // ins要素を生成
    const insElm = document.createElement("ins");
    insElm.className = "adsbygoogle";
    insElm.style = "display:block; text-align:center";
    insElm.setAttribute("data-ad-layout", "in-article");
    insElm.setAttribute("data-ad-format", "fluid");
    insElm.setAttribute("data-ad-client", "ca-pub-XXXXXXXXXXXXXXXX");
    insElm.setAttribute("data-ad-slot", "XXXXXXXXXX");

    // (adsbygoogle = window.adsbygoogle || []).push({});のscript要素を生成
    const pushScript = document.createElement("script");
    pushScript.textContent =
      "(adsbygoogle = window.adsbygoogle || []).push({});";

    // 記事内広告の各要素をaside要素に挿入
    //inarticleAdswrapper.append(adsbygoogleScript, insElm, pushScript);
    inarticleAdswrapper.append(insElm, pushScript);
    //inarticleAdswrapper.append(insElm);

    // 指定した要素の上にaside要素を挿入
    nthHeading.before(inarticleAdswrapper);
  };
  // 適用範囲を取得
  const basePoint = document.querySelector(".post-body");

  // 適用範囲のh2要素を全て取得（details要素内のh2要素を除く）
  const headings = basePoint.querySelectorAll("h2:not(details h2)");

  // 何番目のh2要素を対象にするか指定
  for (let i = 0; i < headings.length; i++) {
    // [2, 4]で2番目と4番目
    if ([2, 4].includes(i + 1)) {
      inarticleAds(headings[i]);
    }
  }
})();
//]]>
</script>
</b:if>

ラベル付き

ラベル付き：クリックすると開きます

<b:if cond='data:view.isSingleItem'>
<script>
// Blogger用
//<![CDATA[
"use strict";
(() => {
  const inarticleAds = (nthHeading) => {
    // 記事内広告が入るaside要素を生成
    const inarticleAdswrapper = document.createElement("aside");
    // class in-article-adsを付与
    inarticleAdswrapper.className = "in-article-ads";
    /*
    // adsbygoogle.jsのスクリプト要素を生成
    const adsbygoogleScript = document.createElement("script");
    adsbygoogleScript.async = true;
    adsbygoogleScript.src =
      "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"adsbygoogleScript.crossorigin = "anonymous";
    */
    // span要素を生成
    const spanElm = document.createElement("span");
    spanElm.className = "in-article-ads__label";
    spanElm.textContent = "広告";

    // ins要素を生成
    const insElm = document.createElement("ins");
    insElm.className = "adsbygoogle";
    insElm.style = "display:block; text-align:center";
    insElm.setAttribute("data-ad-layout", "in-article");
    insElm.setAttribute("data-ad-format", "fluid");
    insElm.setAttribute("data-ad-client", "ca-pub-XXXXXXXXXXXXXXXX");
    insElm.setAttribute("data-ad-slot", "XXXXXXXXXX");

    // (adsbygoogle = window.adsbygoogle || []).push({});のscript要素を生成
    const pushScript = document.createElement("script");
    pushScript.textContent =
      "(adsbygoogle = window.adsbygoogle || []).push({});";

    // 記事内広告の各要素をaside要素に挿入
    //inarticleAdswrapper.append(spanElm, adsbygoogleScript, insElm, pushScript);
    inarticleAdswrapper.append(spanElm, insElm, pushScript);
    //inarticleAdswrapper.append(spanElm, insElm);

    // 指定した要素の上にaside要素を挿入
    nthHeading.before(inarticleAdswrapper);
  };
  // 適用範囲を取得
  const basePoint = document.querySelector(".post-body");

  // 適用範囲内のh2要素を全て取得（details要素内のh2要素を除く）
  const headings = basePoint.querySelectorAll("h2:not(details h2)");

  // 挿入先のh2要素を指定
  for (let i = 0; i < headings.length; i++) {
    // [2, 4]で2番目と4番目
    if ([2, 4].includes(i + 1)) {
      inarticleAds(headings[i]);
    }
  }
})();
//]]>
</script>
</b:if>

insElmの下記Xの部分はご自身の情報をいれてください。

/* ins要素を生成 */
...
insElm.setAttribute("data-ad-client", "ca-pub-XXXXXXXXXXXXXXXX");
insElm.setAttribute("data-ad-slot", "XXXXXXXXXX");

次に、どのブロックを生成するかを決めます。

//（コメントアウト）の有り無しで決めてください。

/* 記事内広告の各要素をaside要素に挿入 */
//inarticleAdswrapper.append(adsbygoogleScript, insElm, pushScript);
inarticleAdswrapper.append(insElm, pushScript);
//inarticleAdswrapper.append(insElm);

最後に、コード後半、この行の[2, 4]の部分で何番目のh2要素の上に生成するか指定します。

if ([2, 4].includes(i + 1)) {

[2]で2番目、[2, 4]だと2番目と4番目、[2, 4, 8]だと2番目、4番目と8番目。

設置場所は、とくにこだわりがなければ</body>の上あたりに設置してください。

適用範囲を指定するセレクターに汎用性が高そうな.post-bodyを使いました。

テンプレートによっては変更が必要です。

/* 適用範囲を取得 */
const basePoint = document.querySelector(".post-body");

adsbygoogleScriptについて

adsbygoogleScriptが必要な場合は、/* */をはずしてください。

（Xはご自身の情報をいれてください）

// adsbygoogle.jsのスクリプト要素を生成
const adsbygoogleScript = document.createElement("script");
adsbygoogleScript.async = true;
adsbygoogleScript.src =
"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"adsbygoogleScript.crossorigin = "anonymous";

CSS

aside要素にclass名in-article-adsを付与しています。

CSSで上下の間隔など、調整してください。

CSSの例

.in-article-ads {
  margin: 2em auto;
}

補足

記事内広告を1個だけ設置ならば下記コードでもOK

クリックすると開きます

<b:if cond='data:view.isSingleItem'>
<script>
// Blogger用
//<![CDATA[
(() => {
  // 適用範囲を取得
  const basePoint = document.querySelector(".post-body");

  /* id名no-adsがあったら記事内広告を挿入しない */
  //const noAds = document.getElementById("no-ads");
  //if (noAds !== null) return;

  /* 適用範囲のh2要素を全て取得（details要素内のh2要素を除く） */
  const findHeadings = basePoint.querySelectorAll("h2:not(details h2)");

  /* h2要素が1個以下だったら作成しない */
  if (findHeadings.length <= 1) return;

  /* 記事内広告が入るaside要素を生成 */
  const insElmwrapper = document.createElement("aside");
  // class in-article-adsを付与
  insElmwrapper.className = "in-article-ads";

  /* adsbygoogle.jsのスクリプト要素を生成
  const adsbygoogleScript = document.createElement("script");
  adsbygoogleScript.async = true;
  adsbygoogleScript.src =
    "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"adsbygoogleScript.setAttribute("crossorigin", "anonymous");
  */

  /* ins要素を生成 */
  const insElm = document.createElement("ins");
  insElm.className = "adsbygoogle";
  insElm.style = "display:block; text-align:center";
  insElm.setAttribute("data-ad-layout", "in-article");
  insElm.setAttribute("data-ad-format", "fluid");
  insElm.setAttribute("data-ad-client", "ca-pub-XXXXXXXXXXXXXXXX");
  insElm.setAttribute("data-ad-slot", "XXXXXXXXXX");

  /* (adsbygoogle = window.adsbygoogle || []).push({});のscript要素を生成 */
  const adScript = document.createElement("script");
  adScript.textContent = "(adsbygoogle = window.adsbygoogle || []).push({});";

  /* 記事内広告の各要素をaside要素に挿入 */
  //insElmwrapper.append(adsbygoogleScript, insElm, adScript);
  insElmwrapper.append(insElm, adScript);
  //insElmwrapper.append(insElm);

  /* 何番目のh2要素を対象とするか指定 */
  // 1番目が0, 2番目が1
  const target = findHeadings[1];

  /* 指定したh2要素の上に記事内広告を出力 */
  target.before(insElmwrapper);
})();
//]]>
</script>
</b:if>

ラベル付き

ラベル付き：クリックすると開きます

<b:if cond='data:view.isSingleItem'>
<script>
// Blogger用
//<![CDATA[
"use strict";
(() => {
  // 適用範囲を取得
  const basePoint = document.querySelector(".post-body");

  /* id名no-adsがあったら記事内広告を挿入しない */
  //const noAds = document.getElementById("no-ads");
  //if (noAds !== null) return;

  /* 適用範囲のh2要素を全て取得（details要素内のh2要素を除く） */
  const findHeadings = basePoint.querySelectorAll("h2:not(details h2)");

  /* h2要素が1個以下だったら作成しない */
  if (findHeadings.length <= 1) return;

  /* 記事内広告が入るaside要素を生成 */
  const insElmwrapper = document.createElement("aside");
  // class in-article-adsを付与
  insElmwrapper.className = "in-article-ads";

  /* adsbygoogle.jsのスクリプト要素を生成
  const adsbygoogleScript = document.createElement("script");
  adsbygoogleScript.async = true;
  adsbygoogleScript.src =
    "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"adsbygoogleScript.setAttribute("crossorigin", "anonymous");
  */
  // span要素を生成
  const spanElm = document.createElement("span");
  spanElm.className = "in-article-ads__label";
  spanElm.textContent = "広告";

  /* ins要素を生成 */
  const insElm = document.createElement("ins");
  insElm.className = "adsbygoogle";
  insElm.style = "display:block; text-align:center";
  insElm.setAttribute("data-ad-layout", "in-article");
  insElm.setAttribute("data-ad-format", "fluid");
  insElm.setAttribute("data-ad-client", "ca-pub-XXXXXXXXXXXXXXXX");
  insElm.setAttribute("data-ad-slot", "XXXXXXXXXX");

  /* (adsbygoogle = window.adsbygoogle || []).push({});のscript要素を生成 */
  const adScript = document.createElement("script");
  adScript.textContent = "(adsbygoogle = window.adsbygoogle || []).push({});";

  /* 記事内広告の各要素をaside要素に挿入 */
  //insElmwrapper.append(spanElm, adsbygoogleScript, insElm, adScript);
  insElmwrapper.append(spanElm, insElm, adScript);
  //insElmwrapper.append(spanElm, insElm);

  /* 挿入先のh2要素を指定 */
  // 1番目が0, 2番目が1
  const target = findHeadings[1];

  /* 指定したh2要素の上に記事内広告を出力 */
  target.before(insElmwrapper);
})();
//]]>
</script>
</b:if>

追記

当初のコードより以下を変更しました。

変更箇所

indexOfをincludesに変更
~~document.querySelectorをBlog1.querySelectorに変更~~

indexOfをincludesに変更

if ([2, 4].indexOf(i + 1) >= 0) {
↓
if ([2, 4].includes(i + 1)) {

indexOf()は配列に値がないと-1を返すので、0より大きいときにif文の中を実行するようにしていました。

ただあまり直感的ではなかったのでincludes()に変更しました。

また、繰り返し処理はforEachでもいいかもしれません。

// 何番目のh2要素を対象にするか指定
headings.forEach((heading, idx) => {
  // [2, 4]で2番目と4番目
  if ([2, 4].includes(idx + 1)) {
    inarticleAds(headings[idx]);
  }
});

document.querySelectorをBlog1.querySelectorに変更

/* 適用範囲を取得 */
const basePoint = document.querySelector(".post-body");
↓
const basePoint = Blog1.querySelector(".post-body");

~~検索範囲を狭くする狙いでdocument.querySelectorをBlog1.querySelectorに変更しました。~~

【Blogger】記事中にアドセンスの記事内広告を自動で追加する

はじめに

コード

adsbygoogleScriptについて

CSS

補足

追記

indexOfをincludesに変更

document.querySelectorをBlog1.querySelectorに変更

2 件のコメント:

検索

お知らせ

最近の注目記事

カテゴリー

Random Picks

よく読まれている記事

Author