先日リリースしたドクセル ですが、本日ユーザが自身のGoogleAnalyticsを設定して、スライドのアクセス解析を行えるようにしました。その方法について、CGMサービスではどのように設計するのがよいかという事例の一つになると考え、Qiitaで記事にしました。
なお、Qiita様に置かれましては、ドクセルの埋め込みパーツ対応をいただけますよう切に願っております。Zenn、Connpass、PR TIMES様にも対応いただけないかのお願いを不躾ながら投げ込みさせていただいております。なにとぞ前向きなご検討をお願いいたします・・！！
作った機能概要
今回もベースをmikkameさんが爆速で作った後、僕の方でユニバーサルアナリティクスとGA4の切り分け対応を以下の方法で対応しました。
このようなフォームに自身のGAIDを記入すると、ご自身のスライドを誰かが閲覧したときにGAによるページビューの送信が行われます。ついでにスライドをめくったタイミングでもページビューになるようにしてみました。
基本的な構成
基本的には、ユーザにGAのID（ユニバーサルアナリティクスならUA-XXX、GA4ならG-XXX）をフォームに記入いただいて、その有無でGAを追加起動するか判断します。
その際の起動ルールとしては、直接ページルールとして設定するのではなく、GTM（Google Tag Manager）を使って設定を行います。
このGTMというものは簡単に言うと、アクセス解析や広告測定用のJSを、管理画面から追加投入できるシロモノなのですが、様々な条件でタグを発火させる・させないの制御が可能になっています。
そこで、今回はGTMに用意されているdataLayerという仕組みを利用しました。dataLayerにスライド作成者がGAのIDを設定している場合はそれをセットし、GTM側でセットされている場合はGoogle analyticsのページビューイベントを発火させるという設定を行ったわけです。
ユニバーサルアナリティクスとGA4の違いを吸収
基本的には上の通りなのですが、現在Google AnalyticsはGA4が出たばかりでして、世の中のWebマスターの皆様はどちらも使っている場合があります。見分け方はそれぞれプロパティというかIDが、 UA- から始まるのか、 G- から始まるのかという点です。
今回はその違いを持って発火し分けることにしました。
まず、それぞれのタグを用意し、トリガーの欄にページビュー、条件をすべてのページビューではなく一部のページビューを選択します。すると条件を選択できる欄があるので、 dataLayer変数XXXXXXがUA-と前方一致する というような条件を書くのです。
すると、dataLayer変数がない（スライド作成者が設定していない）場合は何も起こらず、UA-から始まるIDを設定している場合はユニバーサルアナリティクスのタグを発火、G-から始まるIDを設定しているユーザはGA4のタグを発火という設定が可能になります。
文字で説明するとわかりにくいのですが、こんな感じです。
一番上が運営側のGA4、その下２つがGA4とユニバーサルアナリティクスを切り替えている個所になります。なお、トリガーがもう一つあるのは、ページがロードされた時ではなく、スライドがめくられてhashchangeイベントが発生した段階でもページビューを飛ばすための設定です。hashchangeだとわかりやすいのですが、日本語環境だと「履歴の変更」となっている点が注意ですね。
まとめ
このように、アクセス解析というプロダクトの本筋ではない機能はできるだけ外部の管理機能に追いやることで、プロダクトの設計をすっきりさせることができます。
また、現在このようなCGMサイトにおけるGA対応のコードを利用させる場合、GA4とユニバーサルアナリティクスの混在に対応する必要があるでしょう。間違ってもユーザに自由にScriptタグを書かせて好きなアクセス解析コードを埋め込めるようにしてはいけません。サイトの作りにもよりますが色々取れちゃいますからね。
今後は、法人向けに各種MAツールに対してコンバージョンを飛ばせるような機能を作っていきたいと思いますが、この機能の応用で作れるため、プロダクトチームは単にdataLayerに変数をはいておけば後のことは知らないと責務を分離することが可能になります
それでは、今後ともドクセルをよろしくお願いたします！