浦和の小さなweb屋さん

JimdoサイトにGoogleタグマネージャーのコードを挿入する

Jimdoで制作したサイトでGoogleタグマネージャを使う方法です。

(JimdoカスタムではjQueryを利用することが多いため、jQueryを使っています。)

Googleタグマネージャーでは、コンテナを作成したあとのインストールのために、2つのコードをサイトに埋め込む必要があります。
その手順をメモがてらご紹介します。

インストール1

<head>内に記述します。これは、Jimdoにおいては「基本設定」→「ヘッダー編集」で追加できますので問題ありませんね!以下のコードを追加します。

実際のタグはGoogleタグマネージャの「管理」より拾ってきてください。

<script type="text/javascript">
//<![CDATA[
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
//]]>
</script>

インストール2

もうひとつのタグは、<body>のなるべく上に配置するように言われます。
しかし、jimdoでは、テンプレートを使用している場合、htmlはさわれませんので、普通であれば挿入できません。

※ワンページであったり、ページ数が少ない場合は「ウィジェット」を使う方法もあると思いますが、誤って触ってコードごと無くなってしまうケースも想定できるので、あまりよくないですし、ページ数が多かったりすると大変ですね・・。

なので、jQueryの.prependプロパティでbody直後に動的に突っ込んでしまいます!(エスケープのバックスラッシュを忘れずに!)

<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
    
    // google tag manager 
    var google_tag_manager = '<!-- Google Tag Manager (noscript) -->'
    + '<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"><\/iframe><\/noscript>'
    + '<!-- End Google Tag Manager (noscript) -->';
    
    $("body").prepend( google_tag_manager );
});
// ]]>
</script>

これできちんと認識してもらえるようになりますが、noscriptの時なので、scriptが動かない時はどっちにしろダメってことなのですが、何か良い方法があったらどなたか教えてください。

search consoleの所有者確認は、「HTML タグ」を選択し、metaタグを埋め込みます

おそらく、追加用の2のscriptの影響か(未確認)、タグマネージャーを使おうとすると、エラーが出てしまいます。

エラーメッセージ:Google タグマネージャを使用して https://xxxxxx.xxxx/ を 確認できませんでした (1 分前以内)。 貴サイトの Google タグマネージャ スニペットの場所が間違っています。

metaタグをヘッダーに埋め込めば認証完了です。

共有
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Posts published: 48
Copyrights © idew. All Rights Reserved.