Google Tag Manager の dataLayer を使ってみて、 Simple Data Layer Viewer で確認した話

はじめに

ラブグラフの熊谷です。
今回は、Google Tag Manager(以下GTM) で dataLayer を設定するときに、Simple Data Layer Viewerを利用して動作確認をした話をしていこうと思います。
よろしくお願いします。

背景と目的

データレイヤーは、タグに情報を渡すために使用しますが、コード上に設定したとしても、GTMが読み取れる状態なのかどうか不安が残ります。
そこで、設定したデータを確認するための簡易的な方法について、お話していこうと思います。

進め方

1. Datalayer に関する変更をおこなう

+ <!-- データレイヤー -->
+ <%# Ref: https://developers.google.com/tag-platform/tag-manager/datalayer?hl=ja#installation %>
+ <script>
+ window.dataLayer = window.dataLayer || [];
+ dataLayer.push({
+   'user_id': <%= USER_ID %>,
+ });
+ </script>

 <!-- Google Tag Manager -->
 <script>(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-XXXXXX');</script>
 <!-- End Google Tag Manager -->

2. Simple Data Layer Viewer(Chrome 拡張機能) を利用して、確認します。

dataLayer を記述した状態でサイトを開き、拡張機能を起動すると

JSON形式で、dataLayerの内容を確認できます。

使った理由

実際には、コードを見れば実装されていることはわかりますが、出力されたHTMLコードが貼り付けられているだけでは、コードレビューとしては不安なところが少なからず残ると思います。
第三者ツールを使ってでも、外部のツールから認識できているということが、レビュアーにとっても安心感になると思っています。

まとめ

今回は、データレイヤーに値を追加したときの簡易的な確認方法についてのお話でした。
レビュアーの安心感を担保するためにも、使っていきましょう。

Ref:

• Simple Data Layer Viewer ウェブストア