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

プラグイン

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

本記事の内容

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

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

  

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

 

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

 

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

 

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

 

  

Googleアナリティクスの設定

  

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

 

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

  

<!-- 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>

 

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

 

 

サイトでの設定

 

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

 

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

 

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

 

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

}

 

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

 

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

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

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>

 

 

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

 

 

まとめ

 

いかがでしたでしょうか?

 

PWAは便利で素晴らしいものです。

 

アナリティクスの設定はしっかりして、閲覧数を確認しながら、サイトの表示を調整することが出来れば、さらに使いやすいサイトが構築出来るはずです。

 

是非、ご活用ください。

 

最後までお読みいただきありがとうございました。

 

お勧めの記事・・・

【2022年版】エックスサーバーでWordPressを簡単に始める方法

コメント

You cannot copy content of this page

タイトルとURLをコピーしました