TypeScript な ReactコンポーネントからGoogle Tag Managerへクリック数、インプレッション数を送信する

結論

クリック数

コンポーネント側 (Button.tsx)

const onClickButton = (url: string) => {
  window.dataLayer.push<dataLayerType>({
    event: 'content_click',
    contentUrl: url,
  });
}

型定義ファイル側 (dataLayerType.ts)

export interface IEngagementsContensDataLayter {
  event: string;
  contentUrl: string;
}

インプレッション数(=コンポーネントの表示回数)

コンポーネント側 (Button.tsx)

useEffect() 

で↑と同じことをする。

背景

従来

HTMLの静的なページであればid, classをふってGTM側でそれぞれが何回クリックされたか？ロードされたか？を計測することができる。

今回

Reactにしろ、Vue.jsにしろ、作成したコンポーネントごとの効果測定を行いたいケースは出てくる。 そうなると、id, classを一意にふるのはアプリケーションコード的に読みにくくなる。そしてもう使われないのに謎のid, classが大量に残る。

ということで、 管理しやすく コンポーネントの計測をGTMを使って行う方法はいまのところ dataLayer を使って送信すること、あるいは ga() で値を送ることが良さそう。

考えたこと

前提として、今回のコードはTypeScript + React + dataLayer。

気を付けるべきこととしては、

• dataLayer で送るkey: valueの型は最低限定義しておきたい
• 送る値にenum的なものがあればそれも定義しておきたい

ex) コンポーネントが表示されているページの名称、URLなど

実際に書いてみる

とあるButtonのクリック数を計測したい場合、Buttonの onClick に以下のイベントを渡す。

コンポーネント側 (Button.tsx)

const onClickButton = (url: string) => {
  window.dataLayer.push<dataLayerType>({
    event: 'content_click',
    contentUrl: url,
  });
}