GTMから画像を埋め込んで色々する　#GTMレシピ

はじめに

Google Tag Manager（GTM）を仕事でよく使うので、コピペで使える実装例をここに置いておこうかなと思いました。
特にGTM、検索しても見つからなかったり、紹介されている実装方法がイマイチだったりした感覚があったので、ほんの少しでも世の中のためになればです。
# GTMレシピ

やりたいこと

ページ内に画像を設置したいけど、わけあってwebサイトは変更できない！
Googleタグマネージャーを触る権限だけはあるんだけどな。。。という時に無理やり画像挿入する方法です。

タグ > カスタムHTML

以下をコピペ

// 固定の処理
function addImageToElements(selector, imageUrl, customStyles = {}) {
    var targetElements = document.querySelectorAll(selector);

    targetElements.forEach(function (element) {
        var img = document.createElement('img');
        img.src = imageUrl;
        img.alt = 'Placeholder Image';

        // スタイルの適用
        Object.assign(img.style, customStyles);

        // クリックイベントリスナーの追加（必要に応じて）
        img.addEventListener('click', function () {
            // 画像をクリックしたときの処理（固定の処理がある場合はここに記述）
        });

        // 要素に画像を追加
        element.appendChild(img);
    });
}

// 案件毎に変更が必要な処理
var selector = 'class名やID名';
var imageUrl = 'https://XXX.jpg';
var customStyles = {
    width: '100%',
    height: '100%',
    display: 'block',
    marginBottom: '30px',
    // 他に追加したいCSSプロパティをここに記述　　
    　// cursor: 'pointer'
};

// 関数の呼び出し
addImageToElements(selector, imageUrl, customStyles);

「案件毎に変更が必要な処理」だけ設定してやる必要があります。

var selector = 'class名やID名';
var imageUrl = 'https://XXX.jpg';
var customStyles = {
　width: '100%',
　height: '100%',
　display: 'block',
　marginBottom: '30px',
　// 他に追加したいCSSプロパティをここに記述　　
　　// cursor: 'pointer'
};

セレクタ？クラス名？って感じの人は、理解してから設定した方が安心なので、さくっとAIに聞いちゃってください。