ホーム » QooQ »

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

2023月10月11日更新

2022年02月17日公開

当サイトはアフィリエイト広告を使用しています

記事の中にアドセンスの記事内広告を自動で追加するJavaScriptです。いままでBloggerの記事中にアドセンス広告を自動表示する[忙しい人向け]-スケ郎のお話を使わせていただいていましたが、自分でも書いてみることにしました。追記（2023年10月11日）：広告のラベル表示付きのJavaScriptを追加しました。広告のラベル表示について広告のラベル表示 - Google AdSense ヘルプはじめに元となるアドセンスの記事内広告のコードはこんな感じです<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";CSSaside要素に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に変更しました。~~ del::before, del::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } del::before { content: " [削除開始] "; } del::after { content: " [削除終了] "; }