こんにちは、ギフティの小林(@yashi848484)です。 最近テトリスが得意な方が入社されたため、そのうちぷよぷよで勝負を挑みたいと思っています 💪

先日、私が開発に携わった新プロダクト giftee Box がリリースされました 🎉 ひとまず無事リリースできてホッとしています。

さて、リリースしたものの、やはり実際にどんな風に使ってくれているんだろう？というのは気になります。具体的な利用状況を把握し、今後のエンハンスに繋げられるとベストです。

このようなモチベーションから、 giftee Box に Google Analytics (以下 GA ) を導入しました。導入後に分析対象を調整したいなどといった諸々の事情も鑑みて、コードの変更なしでタグを管理できる Google Tag Manager (以下 GTM )を組み合わせて導入することにしました。

今回は、 GTM + GA の導入における課題解決について掻い摘んで話したいと思います。

どうやって frontend state を分析対象に含めるか？

giftee Box は小さな SPA です。分析のためには、ユーザーが giftee Box 内で何らかの行動を取ったときの frontend state を知りたいです。

GTM には 組み込み変数 というものが用意されています。これにより GTM を導入しただけで、自動でページの URL やクリックした要素が何かを測ることができるようになっています(一部 GTM 側で設定が必要な変数もあります)。

課題: 組み込み変数を使って frontend state を取得できない

組み込み変数により自動でページの URL 等を測ることができるとはいえ、流石に frontend で管理している独自の state を自動で測ることはできません。これを行うには、手動で state の内容を GTM に送る必要があります。

GTM に任意の値を送るには、 データレイヤー と呼ばれるものを使います。データレイヤーとは、 GTM がタグを配信する際に参照する「値の置き場所」のような概念です。

giftee Box では、任意のイベントが発生した際にデータレイヤーに frontend state の一部を送るようにしています。GA への送信は、 GTM 内で GA イベントタグの定義を行えば ok です。

どうやって複数選択 UI の選択内容を分析するか？

giftee Box には最大 500 種類もの様々なギフトが詰まっています。その中からユーザーが欲しいギフトを簡単に見つけられるように、ブランドまたはカテゴリを複数選択して絞り込む機能を提供しています。もちろん「どんな条件でギフトを探しているんだろう？」というのも、今回分析したい内容の一つでした。

先程話したデータレイヤーは、実は正体は単なる js オブジェクトの配列です。ということは、複数選択された条件を配列としてデータレイヤーに追加し、 GTM に送れば、そのまま GA に内容が届き、分析ができそうです。

しかし、ここで大きく 2 つの課題に直面しました。

課題 1: GTM はデータレイヤー上の配列やオブジェクトを解釈できない

配列を GTM に送ることはできるのですが、 GTM はデータレイヤーにある配列をそのままでは解釈してくれません。解釈させるためには、以下のような方法があります。

• 変数テンプレートを使う方法 https://ayudante.jp/column/2020-02-21/11-00/
• カスタム変数定義にスクリプトを書く方法 https://stackoverflow.com/questions/46101755/how-to-create-GTM-variable-from-datalayer-array

しかし今回は、主に「 GTM で複雑なことをやりすぎると管理が煩雑になる」という理由からいずれの方法も採用を見送りました。

結果的に、複数選択された条件を文字列連結し GTM に送るという苦肉の策を取ることにしました…。

課題 2: GA のイベントタグパラメータには長さ上限がある

1 つ目の問題をなんとか回避できても、今度は GA 側に イベントパラメータの長さは 100 文字まで という上限があることが分かりました。

この上限に関してはどうしようもないので、上限 100 文字までになってしまうことを許容することとしました( GA に届いたときに上限が適用されるため、プロダクトからは特に上限を気にせず値をデータレイヤーに送っています)。

まとめ

GTM の導入に関する課題解決についてお話しました。正直ベストとは言えませんが、今後分析を進めていきながら継続的に改善できればと思っています。

ギフティでは、データ分析をしたい人、分析の仕組みを整えたい人、この記事を読んで「もっと良い方法あるよ！」と思った人など、エンジニアを絶賛募集中です！ https://giftee.co.jp/careers