2023年10月1日から景品表示法のステマ規制が始まる。アフィリエイトリンクなどが含まれている場合はそのことを明示する必要が出てきた。
こすぶろには記事によってアフィリエイトリンクが含まれていたり、含まれていなかったりする。サイトのヘッダー部分に一括で表示するという方法もあるけど、このブログはアフィリエイトブログではないのでそれは嫌だ。
そうすると、いままでの記事をひとつひとつ変更していく必要がある。
そんな面倒なことやってられっか！
ということで、JavaScriptで記事内を検索して、アフィリエイトリンクがある場合は記事の上部にアフィリエイトリンクが含まれていることを示すメッセージを表示するようにしてみた。
まずはコードを示す。
(() => {
'use strict';
const searchString = 'tag=***-22';
const result = document.getElementById('main').innerHTML.indexOf(searchString);
if (result === -1) {
return;
}
const header = document.getElementsByClassName('c-entry__header');
const adDiv = document.createElement('div');
adDiv.innerText = '⚠️ 本記事はアフィリエイトリンク（広告）が含まれています。';
adDiv.style = 'background-color: #f5f5f5;padding: 5px;'
header[0].appendChild(adDiv);
})();検索するアフィリエイトリンクの文字列用としてsearchStringという変数を用意してそこに検索文字を入れている。このブログではGoogle Adsense以外ではAmazonアソシエイトしか利用していないので、アソシエイトのtagの表示を検索することにした。
検索対象は記事内のHTML全部。記事内は<main>タグ内にある。<main>タグには幸いid="main"というふうにid属性が指定してあるのでidで探してその内部のHTMLを取得している。
HTML内をsearchStringで検索してなかったらreturn。あったら記事ヘッダー部分に広告表示を追加している。記事ヘッダーはclass指定しかないのでクラスで検索して、どうせ一番最初なので配列要素の最初のヘッダーに、広告表示用のdivを作って入れている。
できたコードをブログに設定すればいいのだけど、このためにHTMLのヘッダーやフッターを編集できるようにするプラグインを入れる必要がある。WordPress.comの場合はプラグインの追加はビジネスプラン以上でできる。コードを<script>タグで指定してあげてできあがり。
これでアフィリエイトリンクが含まれる記事の場合は、記事のヘッダー部分に「広告リンクありまっせ！」と表示されるようになった。この記事の上部にも出ていると思う。
Amazon.co.jp: 確かな力が身につくJavaScript「超」入門 第2版 eBook : 狩野 祐東: Kindleストア
