Blogger：Googleタグマネージャーの設定とインストール (2024/03/30)
タグマネージャーの設定とインストール
Bloggerにgoogleタグマネージャー(以下GTMと記します)を設置したときのメモです。
昔、他のサイトでやったことはあるのですが、もうすっかり忘れてしまいました。
なので、一から勉強しなおしです。
公式のページ
「タグ マネージャーの設定とインストール - タグ マネージャー ヘルプ」
https://support.google.com/tagmanager/answer/6103696?hl=ja
「Google Tag Manager」
https://tagmanager.google.com/
じいじばあばのBloggerサイト用のGTMの設定
GTMのアカウントの設定
アカウント名：Blogger
国：日本
GTMのコンテナ設定
コンテナ名：money-point-life.blogspot.com
「じいじばあばの、ポイ活 マネ活 終活」でも良いかも
ターゲットプラットフォーム：ウェブ
タグマネージャー
タグマネージャーのhomeから、コンテナ名のリンクをクリック、
右上方のGTM-????????をクリック、
すると、次が表示されます。
----------
1. このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。
<!-- Google Tag Manager -->
～ &l= ～
<!-- End Google Tag Manager -->
2. 開始タグ <body> の直後にこのコードを次のように貼り付けてください。
<!-- Google Tag Manager (noscript) -->
～
<!-- End Google Tag Manager (noscript) -->
3. ウェブサイトをテストする (省略可):
----------
※ 注意：Bloggerにおいては「&」の後ろに「amp;」を追加すること。
Bloggerのテンプレート(xml)の編集
「1」のコード
「1」のコードは、コード内の「&」の後ろに「amp;」を追加した後、<head>のなるべく上の方に追加
「2」のコード
「2」のコードは、<body> の直後についかすればよいのですが、JetThemeの場合は下記のところに追加(あってるかな???)
<!-- Your Style and Script before </head> is here -->
<b:if cond='!data:view.isPreview'></head>
<body class="d-block <b:include name='JetBodyClass'/>">
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe height='0' src='https://www.googletagmanager.com/ns.html?id=GTM-????????' style='display:none;visibility:hidden' width='0'/>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<textarea disabled readonly id="element-h" style="display:none">
<style>
/*</b:if></head><body><b:if cond='!data:view.isPreview'>*/
</style>
</textarea></b:if>
(Bloggerが生成するHTMLがきれいに見れるよう、Bloggerの元のコードにいくつかの改行を追加しています。各行頭にスペースを入れるとHTMLの行頭にもスペースが入る場合があるので行頭にスペースは入れていません。)
検証
上記の「3. ウェブサイトをテストする (省略可)：」に、
テストしたいページのURLを入れて、[テスト]をクリック
