Blogger IT javascript

BloggerにGoogleタグマネージャを導入

後学のため、BloggerにGoogleタグマネージャを導入してみました。
思わぬところでうまくいかなかったので、レポートです。
日本語で喋って欲しい方はブラウザバック！

Googleタグマネージャとは何か？

「Googleタグマネージャ」(以後GTMと表記)はWEBサイトの埋め込みコードを管理するためのサービスです。
HTMLを直接触らなくてもトラッキングコード等の追加・変更ができます。

参考: Google タグマネージャ公式サイト
参考: Googleタグマネージャの概要と導入方法（2017年最新版） : ビジネスとIT活用に役立つ情報

コードの埋め込み

HTMLを直接触らなくていいと言いつつ、GTMを導入するためにコードを埋め込む必要があります。
これさえクリアすれば、GTM上からトラッカーを管理できるようになります。

  1. Bloggerの編集からテーマを選択
  2. HTMLの編集

できるだけ上のほうに埋め込むよう指示されますが、titleやmetaの下あたりでいいでしょう。

さて、コードを埋め込んだら保存…。ここで問題発生が発生しました。

保存ができない

XML の解析中にエラーが発生しました。行 XX、列 XX: The reference to entity "l" must end with the ';' delimiter.

実体参照"l"は';'で終わらなければならない。

(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','XXXX');

3行目に注目すると、'&l='とあるのがわかります、これがエラーの原因ですね。
保存できないと何も始まらないので、以下のように書き換えました。 

(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','XXXX');

'&l='とエスケープしてやることで、無事保存できました。
ちなみに、保存するとクオーテーションなどもエスケープされます。

問題は、これで動くかどうかですね。
GTMからGoogleアナリティクスを配信してみます。
リアルタイムレポートを見て動作確認……OK。

というわけで、無事導入できました。
役に立つかわかりませんが、ご参考までに。

今回はここまでです。お気に召されましたか？
フォロー、コメントなどお気軽にどうぞ。
それでは、またお会いできますように。