すたすた式
Blogger QooQ
記事の中にアドセンスの記事内広告を自動で追加する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日タイプミス修正）
<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要素の上に生成するか指定します。
[2, 4]
if ([2, 4].includes(i + 1)) {
[2]で2番目、[2, 4]だと2番目と4番目、[2, 4, 8]だと2番目、4番目と8番目。
[2]
[2, 4, 8]
設置場所は、とくにこだわりがなければ</body>の上あたりに設置してください。
</body>
適用範囲を指定するセレクターに汎用性が高そうな.post-bodyを使いました。
.post-body
テンプレートによっては変更が必要です。
/* 適用範囲を取得 */ const basePoint = document.querySelector(".post-body");
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";
aside要素にclass名in-article-adsを付与しています。
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>
当初のコードより以下を変更しました。
変更箇所
if ([2, 4].indexOf(i + 1) >= 0) { ↓ if ([2, 4].includes(i + 1)) {
indexOf()は配列に値がないと-1を返すので、0より大きいときにif文の中を実行するようにしていました。
indexOf()
-1
0
ただあまり直感的ではなかったのでincludes()に変更しました。
includes()
また、繰り返し処理はforEachでもいいかもしれません。
forEach
// 何番目のh2要素を対象にするか指定 headings.forEach((heading, idx) => { // [2, 4]で2番目と4番目 if ([2, 4].includes(idx + 1)) { inarticleAds(headings[idx]); } });
/* 適用範囲を取得 */ const basePoint = document.querySelector(".post-body"); ↓ const basePoint = Blog1.querySelector(".post-body");
検索範囲を狭くする狙いでdocument.querySelectorをBlog1.querySelectorに変更しました。
document.querySelector
Blog1.querySelector
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
こちらのスクリプト導入させていただきました。
返信削除コードがわかりやすくてカスタマイズしやすく、とても便利でした。
ありがとうございます。
コメントありがとうございます。
削除コードがお役に立っているようで良かったです。