コード・実装

【Nuxt.js】Googleアナリティクスの[G-XXXXXX]の設定タグを挿入する方法 | Google analytics 4

こんにちは! フリーランスでWEB制作をしているくまミックスです。

この度、nuxt.jsで以前作成させていただいた、CSSジェネレーターを作成させていただいたのですが、その際にGoogleアナリティクスの設定タグの設定にハマったのでこちらで共有させていただきます。

設定の際にハマった部分

Googleアナリティクスの測定 IDが以前は「UA-12345-0」のような形だったのですが、最近新規サイトの設定をした際に「G-XXXXXXXX」のように形式が変わっていました。

 

そのためかはわからないのですが、以前は下記のようにnuxt.jsに「analytics-module」をインストールで設定できるはずだったのですが、今回私の環境ではうまくGoogleアナリティクスの設定をできませんでした。

 

そのため、今回他の方法を試してみたら、うまくいったので、今回共有させていただこうと思います。

 

設定方法

nuxt.config.jsにて下記のように書きました。

nuxt.config.js

export default {
  head: {
    script: [{
        async: true,
        src: ‘https: //www.googletagmanager.com/gtag/js?id=【測定 ID : G-XXXXX】’ },
          {
            innerHTML: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(‘js’, new Date());gtag(‘config’, ‘【測定 ID : G-XXXXX】’);`
          }],
    },
  }

 

以上がNuxt.jsにGoogleアナリティクスの[G-XXXXXX]の設定タグを挿入する方法方法です。

 

GoogleアナリティクスがG-XXXXXXに変わった

2020年10月14日にGoogleアナリティクスが大幅にアップデートされ、様々な変更がありました。

Googleアナリティクスの測定IDは以前は「UA-XXXXXX-X」の形式でしたが、現在は「G-XXXXXXX」になっています。

Google アナリティクス 4 プロパティというらしいです。

正直測定ID等の変更はやめてほしい

 

WordPressでもプラグインで設定していると、プラグイン事態がそもそも「UA-XXXXXX-X」での形式で設定する前提のものがあり、こちらも手動で変更しました。

 

測定IDを参照する方法はGoogleアナリティクスの「管理」>「プロパティ」>「データストリーム」から、測定IDの部分には、「G-XXXXXXX」とあります。

「UA-XXXXXX-X」形式の測定IDを取得したい時は、新規サイトを設定する際に、プロパティの設定画面の「詳細オプション表示」から、「ユニバーサルアナリティクス プロパティの作成」をONにし、「Googleアナリティクス 4とユニバーサルアナリティクスのプロパティを両方作成する」にチェックを入れると、「G-XXXXXXX」と「UA-XXXXXX-X」の両方の測定IDを設定することができるようです。

 

Google アナリティクス 4で他にどんなことが変わった?

今回のアップデートGoogleアナリティクスは、機械学習を導入し、過去データからの将来の予測ができるということです。

購入の可能性や離脱の可能性などの予測により、今後一週間の売り上げを推定することが可能とのことです。

 

また、測定の考え方や、レポート画面が大きく変わったようです。

今までは各ページを軸に「平均閲覧ページ数」や「ユーザーの滞在時間」など、今まで一般的と言われていたホームページをページごとに検証するツールというイメージだったと思います。

ですが、アプリを測定する際は、「ページ」という概念がありません。

そのため、スクロールやダウンロードなどユーザーの行った行動が今回のアップデートで把握しやすくなったと思います。

ユーザーの行動は「管理」>「プロパティ」>「データストリーム」の「ウェブ ストリームの詳細」から、拡張計測機能の設定で詳細を確認することができます。

 

また、近年欧米を中心にプライバシーの問題もあり、GDPR(EU一般データ保護規則)や、CCPA(カリフォルニア州 消費者プライバシー法)などを意識したアナリティクスになっているのではないでしょうか?

 

他にも随時新機能や更新が行われているようなので、定期的に機能を確認し調べてみようと思います。

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】