先日 Mezzanine で
この
設定した
目次
- 参考
- templateの
構成 - データレイヤー変数の
出力方針 - タグマネージャの
設定、 キー値の 発行 - テンプレートと、
settings.py、 defaluts.py の 編集 - Google Tag Manager での
設定変更
参考
Googleタグマネージャの
データレイヤーで、 Googleアナリティクスの カスタムディメンションを いれてみた - Qiita Improve Data Collection With Four Custom Dimensions - Simo Ahava’s blog
Google タグマネージャを
使ってGoogle アナリティクスの カスタム ディメンションを セットする 方法│株式会社イー・エージェンシー
templateの 構成
以下は、
base.htmlが
記事表示用の
include等その
データレイヤー変数の 出力方針
blog_detail.html に、
blog_list.html には
Google Tag Manager で、
タグマネージャの 設定、 キー値の 発行
ここでは、
末設定の
【
テンプレートと、 settings.py、 defaluts.py の 編集
base.html blog_post_detail.html、
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 には、
Mezzanine の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
は、
- 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 のGOOGLE_TAG_MANAGER_ID
を
インストール Application の
- 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
を
トリガーの 作成
データレイヤーの
データレイヤー変数とfalse
、false以外
で
タグの 作成
トリガーに
ブログ記事の
タグの
一覧 ブログ記事の
PageView計測タグ ブログ記事以外の
PageView計測タグ
この設定で、
送信した
カスタムディメンションは
定義追加時は
まあ、
以上です。
コメント