PWA構築時のgoogleアナリティクス設定方法（ブラウザと別に集計する方法）

プラグイン

2022.05.092023.01.02

記事内に広告が含まれています。

(このページは2022年5月9日に更新しました)

本記事の内容

「ＰＷＡの構築方法については様々なサイトに掲載されているけど、googleアナリティクスの正しい設定方法が分からない。」

「ＰＷＡのみ集計する方法が知りたい。」

ＰＷＡは、ウェブの技術をフル活用して、スマートフォン上でネイティブアプリの様に動かす仕組みです。

ＰＷＡにすることで、Ｗｅｂブラウザから開いたり、ブラウザにお気に入り登録する必要もなくなり、アクセスが容易になります。

また、ＰＷＡはブラウザとは違い、アドレスバーが無くブラウザでは無い分、操作性が向上し、よりユーザーにとって快適な環境を提供することが出来ます。

今回は、そんなＰＷＡのトラッキングの設定についてみていきたいと思います。

Googleアナリティクスの設定
サイトでの設定
まとめ

Googleアナリティクスの設定

この記事を読んでいるということは、googleアナリティクスのトラッキングコードの貼り付けについて、既に理解していると思いますので、コードの作成については割愛します。

Googleアナリティクスの管理画面に入り、ＰＷＡ用の新しいプロパティ（トラッキングコード）を作成し、取得します。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-************-*"></script>

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-***********-*');
</script>

トラッキングコードが出来ると上記の様なコードが出来ると思います。

サイトでの設定

サイトでまずはＰＷＡを設定しますが、こちらも既に導入されている方向けになりますので、ＰＷＡの導入方法は割愛します。

アナリティクスのトラッキングコードをヘッダー等に貼り付けると通常の動きになり、サイトからのアクセスなのか、ＰＷＡからのアクセスなのか分かりません。

そこで使うのが、javascriptのコードです。

if(window.matchMedia('(display-mode: standalone)').matches){

}

このコードを使うことで、スタンドアロンアプリケーション表示されているかを条件に、分岐さることが出来ます。

スタンドアロンアプリケーションとは、ブラウザなどの中で動くアプリケーションでは無く、単体で動くアプリケーションのことを指します。

ＰＷＡを使うと、表示モードがスタンドアロンアプリケーションになります。

if文を使い、その表示モードであるかを検出します。

上記のコードを、トラッキングコードに割り込ませます。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-***********-*"></script>

<script>
if(window.matchMedia('(display-mode: standalone)').matches){

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-************-*');

}

</script>

こうすることで、ＰＷＡの時のみ、アナリティクスにデータを送信することが出来ます。