React Native for Web + TypeScriptでGoogleTagManagerを使ってみた
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
CX事業本部の太田です。
React Native for Web + TypeScriptでGoogleTagManager(以後GTM)を使ってみたのでご紹介します。
GTMとは
GTMはタグやトリガーを設定して、GoogleAnalytics(以後GA)へのイベント送信を行えるGoogleが提供するツールです。
無料で提供されており、誰でも使えます。
GTMを組み込む
まずは、GTMを使えるようにHTMLに設定を追記します。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
...省略
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
...省略
</body>
</html>
GTM-XXXXXXXの部分は利用するGTMに合わせて変更してください。
プレビューモード
GTMが組み込まれたか、プレビューモードを使って確認してみます。
管理画面でプレビューボタンをクリックします。
しばらく待つとプレビューモード状態になります。
終了する場合は、プレビューモードを終了をクリックすればOKです。
ページにアクセスして下部にGTM用のUIが表示されれば組み込みはOKです。
プレビューモードを使えばGTMで設定した内容が正しく動きているかも確認できます。
最終的にはGTMを公開する必要がありますが、作業中に一旦動作を確認するのにプレビューモードを使います。
トラッキングID用の変数を作成
イベンント送信先のGAのトラッキングIDは、色んなところで使うので変数としておくと便利です。
GTMの管理画面から変数-ユーザー定義変数-新規を選択変数のタイプから、Google アナリティクス設定を選択トラッキング IDに、送信したGAのトラッキングIDを入力変数の名前を入力して、保存をクリックして作成完了
トラッキングIDの確認方法はここを参考にしてください。
ページビュー(PV)の計測
ページビュー(以後PV)を計測する設定を行ってみます。
トリガーの設定
トリガーはページ内でどういった操作をした場合に、GTMに反応させるかを決めるものになります。
PV用のトリガーは標準で用意されていますが、SPA(Single Page Application)の場合は正しく動作しません。
SPA用に別トリガーを作ります。
GTMの管理画面からトリガー-新規を選択トリガーのタイプから履歴の変更を選択トリガーの名前を入力して、保存をクリックすれば作成完了
タグの設定
タグは、どのトリガーで、GAに対してどういったイベントを送信するかを決めるものになります。
GTMの管理画面からタグ-新規を選択タグのタイプからGoogle アナリティクス: ユニバーサル アナリティクスを選択- タイプの設定を以下のようにします
・トラッキング タイプはページビューを選択
・Google アナリティクス設定は、先ほど作ったトラッキングID用の変数を指定 GAに送信するトリガーを選択
・ 今回はAll Pagesと先ほど作成した履歴の変更の両方を設定
All Pagesは、GTMで用意されているPV用のトリガーです
All Pagesも入れた理由は最初のページの場合、履歴の変更ではイベントが送られないので入れていますタグの名前を入力して、保存をクリックして作成完了
動作を確認
プレビューモードにしてページ内で遷移などをしてみれば、設定したタグが反応しているが分かるかと思います。
イベントの計測
今度はボタンがクリックされた際に、GAにイベントを送ってみます。
また、どのボタンが押されたかが判別できるように、データーレイヤー変数というものを使ってみたいと思います。
データーレイヤー変数を追加
GTMの管理画面から変数-ユーザー定義変数-新規を選択変数のタイプから、データーレイヤー変数を選択データーレイヤー変数名を入力変数の名前を入力して、保存をクリックして作成完了
トリガーの設定
GTMの管理画面からトリガー-新規を選択トリガーのタイプからカスタムイベントを選択イベント名を入力一部のカスタムイベンントのラジオボタンにチェックをつけるEvent-等しい-手順3と同じ名前で設定トリガーの名前を入力して、保存をクリックして作成完了
タグの設定
GTMの管理画面からタグ-新規を選択タグのタイプからGoogle アナリティクス: ユニバーサル アナリティクスを選択- タイプの設定を以下のようにします。
・トラッキング タイプはイベントを選択
・カテゴリ、アクションを任意で入力
・ラベルには先ほど作成したデーターレイヤー変数を指定
・Google アナリティクス設定は、先ほど作ったトラッキングID用の変数を指定 GAに送信するトリガーは、先ほど作成したトリガーを指定タグの名前を入力して、保存をクリックして作成完了
ソースの修正
まずはdatalayerを使えるように、定義ファイルを作成します。
declare global {
interface Window {
dataLayer: Array<Object>;
}
}
こちらの詳細は以下の記事を参考になります。
TypeScript で window 直下にいろいろ生やしたりグローバル変数を定義する
次にボタンのクリックイベントで、上記で追加したwindow.dataLayerに対して情報をプッシュします。
const { dataLayer } = window;
const onPress = React.useCallback(() => {
dataLayer.push({
event: "button_click", // トリガーで設定したイベント名を指定
button_name: "hoge", // データーレイヤー変数で作った変数名と値をKeyValueで指定
});
});
<TouchableOpacity onPress={onPress}>
<Text>hoge</Text>
</TouchableOpacity>
動作確認
プレビューモードにしてクリックしてみると、以下のようにイベントが反応しているのが分かるかと思います。
イベントをクリックすると、以下のように詳細が見れます。
ラベルにbutton_nameで指定した値(hoge)が入っているが確認できます。
まとめ
GTMの基本的な使い方を紹介させてもらいました。
ページ側の対応が最小限で済むので、結構簡単に対応できましたかと思います。
最後までご覧いただきありがとうございました。
