本来、Googleタグマネージャは好きな位置にタグを表示できないので、ウィジェットや広告配信タグなどページの構造と関連づけられているタグはサポートしていません。しかしJavaScriptを使ってDOM操作をすれば、好きな位置にタグを表示することができます。

今回はjQueryを使って好きな位置にタグを表示する方法を紹介します。

jQueryを読み込む

あらかじめ、htmlにjQuery本体を読み込むコードを追加しておきます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Googleタグマネージャのタグの中に入れてもいいのですが、jQueryはほぼ標準でhtmlに入れることが多く、タグマネージャの中に入れてしまうと重複読み込みやタグを削除したときを考えると管理しにくくなります。このようなコードはhtmlに組み込んでおくのが無難です。

カスタムhtmlタグを作成する

新しいタグを追加します。タグの種類を[カスタムHTMLタグ]にして、以下のように設定します。

カスタムHTMLタグのHTMLには、次のようなコードを入力します。

<script>
if(typeof jQuery != "undefined"){
    $(function(){
        $("#挿入先の要素id").prepend('挿入するhtmlタグ');
    });
}
</script>

“挿入先の要素id”と”挿入するhtmlタグ”を書き換えます。

このjQueryは次のように動作します。まずjQueryが存在するか判定して、万が一htmlにjQueryが組み込まれてないときにエラーが出ないようにします。次に、htmlの中から”挿入先の要素id”を探して、見つかったら”挿入するhtmlタグ”を要素の中の先頭に挿入します。

配信のルールに、このタグを表示したいページを指定します。

プレビュー、バージョン作成、公開

Googleタグマネージャのプレビューで正常に動作したら、バージョンを作成、公開します。

AdSense広告配信タグをGoogleタグマネージャで表示する

AdSenseの広告配信タグをGoogleタグマネージャで表示する例を紹介します。

AdSenseのタグには、ページ内のどの位置に置いてもいいコードと、広告を表示する位置に置くコードが混在しています。
それらを分けて、広告を表示する位置に置くコードだけをjQueryで表示するように書き換えます。

↓AdSenseのオリジナルのタグ(idはダミーです)

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:250px;height:250px"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

↓Googleタグマネージャに入力する、修正後のタグ

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
if(typeof jQuery != "undefined"){
    $(function(){
        $("#挿入先の要素id").prepend('<ins class="adsbygoogle" style="display:inline-block;width:250px;height:250px" data-ad-client="ca-pub-0000000000000000" data-ad-slot="0000000000"></ins>');
        (adsbygoogle = window.adsbygoogle || []).push({});
    });
}
</script>

ご注意

本来はページの構造と関連づけられているタグはサポートされていませんので、ここで紹介したやり方が将来も動作するとは限りません。

関連しているかもしれない記事

• jQueryを使ったJavaScriptの書き方と、日本語入力モード制御の例
• jQueryプラグインの簡単な書き方と、ランダム表示プラグインの例
• Googleタグマネージャとアナリティクスでフォーム入力イベントトラッキング – 独自のイベントリスナー作成の基本
• Googleタグマネージャとアナリティクスでソーシャルボタンをトラッキングする
• Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」