前回更新で、

　１.「テンプレートリテラル」というテクニックを知った
　２. AdSense コードは、現在はかなりの範囲で変更が認められている、と知った
　３. 「テンプレートリテラル」で AdSense コードを変更しても、勘所さえ押さえておけば、（たぶん）規約違反にはならない。

ってな所まで学んだ。という事で、今回は
「AdSense でテンプレートリテラルをやってみよう」をテーマに更新する。

まず、私は「テンプレートリテラル」を知らない。
なので 話はそこからスタートだ。

テンプレートリテラルとは

テンプレートリテラル (template literals)
逆引用符 (`) で区切られたリテラルで、複数行の文字列、埋め込み式による文字列の補間、タグ付きテンプレートと呼ばれる特殊な構文を許可します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

なるほど。逆引用符文字 (`) で囲むのがミソらしい。
それだけで良いのか。思ったより単純な話だった。
これにより、複数行の文字列も可能になる････ と。
（でもリンク先を読み進めると、チョット難しそう！）

で、このページの趣旨は、こいつを AdSense コードに使うとどうなるか？である。

基本的なテンプレートリテラルの使い方

まず、AdSense コードをテンプレートリテラルで定義する。
その後、JSでDOM（HTML要素）内に挿入。
（前回更新記事と同じコード）

基本コードの例

// 広告ユニットIDを定義
const adSlotId = "1234567890";
const adClient = "ca-pub-xxxxxxxxxxxxxxxx";

// テンプレートリテラルで広告コードを作成
const adCode = `
<script async src="https://pagead2.googlesyndication.com{adClient}" crossorigin="anonymous"></script>
<!-- 広告ユニット名 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="${adClient}"
     data-ad-slot="${adSlotId}"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
`;

// 挿入先要素を取得してHTMLをセット
document.getElementById('ad-container').innerHTML = adCode;

基本は、こんな形になる

使用例: 記事内広告などの動的生成する

こういうコードをドコで使うの？なんでそんなコトするの？
という質問に対する答えには、

記事中の「特定の段落 (pタグ) の後」などに、動的に広告を自動で挿入する

などの答えが挙げられる。

要は、広告の表示場所を、後から動的に決められる、ってコトである。
工夫次第で色々イケる。

実際に使用する場合の例

// 記事の段落要素を全て取得
const paragraphs = document.querySelectorAll('.article-body p');
if (paragraphs.length > 2) {
    // 3番目の段落の後に広告を入れる
    const adSpot = paragraphs[2];
    const adUnit = document.createElement('div');
    adUnit.innerHTML = `
      <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="9999999999"></ins>
    `;
    adSpot.after(adUnit);
    (adsbygoogle = window.adsbygoogle || []).push({});
}

こんな感じでOK。
上記の例は、class「article-body」内の、3つ目の「p タグ」の直後に AdSense が表示されるようにするモノだ。

しかし、こういうコードを使う場合、いくつかの注意点があるらしい。

AdSense とテンプレートリテラル使用時の注意点

DOM のタイミングによっては CSS が効かないとか、なんか面倒くさいな。。。
それに、現在 作っているサイトでは、動的に AdSense を差し込む必要は全くない。

「コレ･･･、自分のサイトには不要なんじゃね？」という考えの方が大きくなった。

この時点での私の考え

ここまで分かれば、個人的には十分な収穫である。
コードの実装については、今回は見送りする。

今回の更新、メインとなる情報は以上。

以下はおまけ。
こういう変更がポリシー違反にならないかどうか、念のため Gemini に尋ねてみた時のログである。いつか読み返す時のため、これもブログに残しておく。（注: AI 特有の冗長な部分は一部削除している）

以下、Gemini とのやりとりのログ

私の質問

Gemini の回答

私の質問

Gemini の回答

前回更新で「現在の AdSense コードの変更が許可される範囲は、たぶん、この辺だろうな」と考えていたものと、ほぼ同じ答えが返ってきた。たぶんこれで正解なのだろう。

AdSense コードを テンプレートリテラル で出力しても、基本的には大丈夫そうな感じもある。ここまで分かれば、これも十分である。

今回の更新は以上。