先日 Mezzanine で構築したブログのコンテンツのメタデータ を Google Analytics にインポートしてみる(失敗) | Monotalk でデータインポート機能で、カスタムディメンションを送信しようとしたところ、原因不明でうまくいきませんでした。
この代替方法として、ページビュー計測時に、 Django の Template 内で、Google Tag Manager のデータレイヤー変数を設定してみます。
設定したデータレイヤー変数は、カスタムディメンションとして、Google Analytics に送信します。

目次

参考

templateの構成

以下は、当ブログで使用している Mezzanine の blog テンプレートの構成です。
base.htmlが規定テンプレートとして存在し、
記事表示用の blog_post_detail.html、 一覧表示用の blog_post_list.html が base.htmlを継承しています。
templateの関係

include等その他のテンプレートの使用していますが、今回の話には登場しないため省略しています。

データレイヤー変数の出力方針

blog_detail.html に、記事のカテゴリ、作成日、説明などのデータを保持するデータレイヤー変数を出力します。
blog_list.html にはデータレイヤー変数は不要で、出力の対象外とします。
Google Tag Manager で、データレイヤー変数の有無を判断して、データレイヤー変数が存在する場合のみ、カスタムディメンションを送信します。

タグマネージャの設定、キー値の発行

ここでは、特に説明しません。
末設定の方は、以下、もしくはその他初期設定の手順をご確認ください。
【2017年最新版！】Googleタグマネージャ導入のメリットと使い方 | nex8ブログ

テンプレートと、settings.py、defaluts.py の編集

base.html blog_post_detail.html、settings.py、defaluts.py を編集します。

base.html

  • head内のHTMLの抜粋
    以下、追加したheadタグ内の記述の抜粋です。
    gtmタグを既に設定済の方は、{% block gtn_dataLayer %}{% endblock %} の部分だけを記載すればいいかと思います。 

        {% if settings.GOOGLE_TAG_MANAGER_ID and not request.user.is_staff %}
    {% block gtn_dataLayer %}{% endblock %}
    <!-- 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','{{ settings.GOOGLE_TAG_MANAGER_ID }}');</script>
    <!-- End Google Tag Manager -->
    {% endif %}

  • bodyタグの直下のHTMLの抜粋 

        {% if settings.GOOGLE_TAG_MANAGER_ID and not request.user.is_staff %}
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ settings.GOOGLE_TAG_MANAGER_ID }}"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    {% endif %}

  • 説明.記事ページとリストページのdataLayer変数の出し分け Google Tag Manager の タグは全ページに出力しますので、base.html 内に記載し、 dataLayer 変数については、出し分けを行いたいので、子のテンプレートファイルでコントロールできるようにブロックを記載しています。 

      {% block gtn_dataLayer %}{% endblock %}

  • 説明.dataLayer変数はgtmタグの読み込み前に定義する
    dataLayer 変数は、タグ配信時に確実に読み取れるように、head内のGoogle Tag Manager のタグ読み込み前に設定しています。

blog_post_detail.html

dataLayer には、blogの記事情報、blog記事のカテゴリー情報を設定します。
Mezzanine の blog_post_detail.html 内では、それぞれ blog_post、blog_post.categories.all でアクセス可能です。

  • gtn_dataLayerブロックの抜粋 

    {# dataLayerの設定 #}
{% block gtn_dataLayer %}
{% autoescape off %}
  <script type="text/javascript">
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'blogPostId':'{{ blog_post.id|escapejs }}',
      'blogPostUserName':'{{ blog_post.user.username|escapejs }}',
      'blogPostDescription':'{{ blog_post.description|escapejs }}',
      'blogPostCreated':'{{ blog_post.created|escapejs }}',
      'blogPostUpdated':'{{ blog_post.updated|escapejs }}',
      {% with blog_post.categories.all as categories %}
      'blogPostCategories':'{% for category in categories %}{{ category|escapejs }}{% if not forloop.last %};{% endif %}{% endfor %}'
      {% endwith %}
    });
  </script>
{% endautoescape %}
{% endblock %}

  • 説明.blog_post.id について
    blogの記事IDを設定していますが、こちらはカスタムディメンションとしては送信せず、カスタムディメンションの送信要否の判定に使用します。
    blogの記事の他の情報でも問題なくできると思いますが、idが堅いかなと考えました。

  • 説明.dataLayer変数のscriptタグの型指定について
    公式ドキュメントを見ているとtype="text/javascript"の記載はありません。
    django-compressのcommpress タグ内に記載すると、type指定のないスクリプトが削除されてしまうので、付与するようにしました。
    付与しても、付与なしでも動作は特に変わりませんでした。1
    compressタグの外に出したので、type記述は削除しても問題ありません。

  • 説明.categoryについて
    1つの記事にカテゴリは複数ひも付きます。;区切りで出力を行うようにしました。

settings.py の編集

settting.pyにテンプレートに追加したGOOGLE_TAG_MANAGER_ID を追加します。
GOOGLE_ANALYTICS_ID は、Google Tag Manager 経由で使用するため、コメントアウトしました。

  • settings.py 
    #############################
# Google Analytics settings
#############################
#---GOOGLE_ANALYTICS_ID
#GOOGLE_ANALYTICS_ID='UA-XXXXXXXXX'
#---GOOGLE_TAG_MANAGER_ID
GOOGLE_TAG_MANAGER_ID='GTM-XXXXXXX'

defaluts.py の編集

Mezzanine の template 内からGOOGLE_TAG_MANAGER_ID を使用可能にするため、
インストール Application の いずれかの defaluts.py に以下の記載を追加します。

  • defaluts.py 
    ###########################
# FOR CLEAN_BLOG SETTINGS #
###########################
register_setting(
    name="TEMPLATE_ACCESSIBLE_SETTINGS",
    default=("GOOGLE_TAG_MANAGER_ID",),
    append=True,
)
register_setting(
    name="GOOGLE_TAG_MANAGER_ID",
    description="Google tag manager id",
    editable=False,
    default="",
)

Google Tag Manager での設定変更

Google Tag Mamager 上では以下の作業を行います。

  • データレイヤーの変数の作成
  • トリガーの作成
  • Dimentionをを送信するページView計測定義、とDimentionを送信しないページView計測定義

データレイヤーの変数の作成

Google Tag Manager 上でデータレイヤーの変数を作成します。
これは、データレイヤーで設定したキーの数分作成します。
データレイヤーの変数

blogPostId だけは以下の通りデフォルト値 false を設定します。
blogPostId

トリガーの作成

データレイヤーの変数が作成後にトリガーを作成します。
データレイヤー変数として作成した、blogPostId の初期値がfalse、false以外で2つのトリガーを作成します。
トリガー

タグの作成

トリガーに紐づけた、Page View 計測タグを作成します。
ブログ記事のPageView計測タグでは、custom dimention の送信を行い、ブログ記事以外のPageView計測タグでは、custom dimention の送信は行いません。

  • タグの一覧
    タグ

  • ブログ記事のPageView計測タグ
    ブログ記事のPageView計測タグ

  • ブログ記事以外のPageView計測タグ
    ブログ記事以外のPageView計測タグ

この設定で、カスタムディメンションの計測ができるようになりました。
送信したところやっぱりいらないのではという項目もあります。
カスタムディメンションは一度定義したら、名称変更は可能ですが削除はできません。
定義追加時は役割をじっくり検討して本当に必要なものを送付すべきです。
まあ、20項目あるので多少失敗しても問題はないかと思います。
以上です。

コメント

カテゴリー

最近の投稿