旧GA(UA)と新GA4の共存方法
まずGA4の測定IDを入手する
- https://analytics.google.com/ に行く
- 「管理」→「GA4 設定アシスタント」 (移行を促す上の通知から遷移してもいい)
- 「新しい Google アナリティクス 4 プロパティを作成する」→「はじめに」
- モーダルが開くので「作成して続行」
- 「手動でインストールする」タブを選択する
- 明示されているタグをクリップボードにコピーする
このあたりの手順が本当に難しい。
初回専用というか GA4 にまだ移行していない人専用の画面でいろいろ促してくるため二度目に来たときに本来の遷移がわからなくなってしまう。
測定IDを探し出す
ややこしいのだがユニークIDが二つ存在する。
- ストリームID: 1234567890 (ただの数字)
- 測定ID: G-XXXXXXXXXX (必ず G- から始まる)
これを混同してはいけない。
gtag に書くのは測定IDの方になる。
そしてこれがどこに書いてあるのかがまたわかりづらい。
- 管理
- 左上で「GA4」に変更
- データストリーム
- 一つ目の項目の右端矢印クリック
- ウェブストリームの詳細が表示される
そこに測定ID G-XXXXXXXXXX が隠されている
<head> の直後に貼り付けてはいけない
貼り付けていいのは新規の場合のみ
HTMLの場合
既存のID指定部分と同様に新しいIDを追加するだけでよい
gtag('config', 'UA-OOOOOOOOO-1');
+ gtag('config', 'G-XXXXXXXXXX');
フレームワーク向けの何かを別段活用しているのでなければ全部この方法でよさそうな気もする
@nuxtjs/google-analytics のように公式にもかかわらずすぐサポートが切れたり[1]すると何のために使っていたのかわからない(小声)
シンプルが一番！
Nuxt.js 2 系の場合
@nuxtjs/google-analytics は GA4 に対応していないので消す
npm rm @nuxtjs/google-analytics
nuxt.config.js からも @nuxtjs/google-analytics の設定を削除する
代替として @nuxtjs/google-gtag を入れる
npm i @nuxtjs/google-gtag
nuxt.config.js に新しい設定を書き加える
--- a/nuxt.config.js
+++ b/nuxt.config.js
** Nuxt.js modules
*/
modules: [
+ [
+ "@nuxtjs/google-gtag", {
+ id: "G-XXXXXXXXXX",
+ // config: {
+ // anonymize_ip: true, // anonymize IP
+ // send_page_view: false, // might be necessary to avoid duplicated page track on page reload
+ // linker: {
+ // domains: ["domain.com", "domain.org"],
+ // },
+ // },
+ // debug: true, // enable to track in dev mode
+ // disableAutoPageTrack: false, // disable if you don"t want to track each page route with router.afterEach(...).
+ additionalAccounts: [
+ {
+ id: "UA-XXXXXXXXX-1", // required if you are adding additional accounts
+ // config: {
+ // send_page_view: false, // optional configurations
+ // },
+ },
+ ],
+ },
+ ],
additionalAccounts の方に従来のIDを指定する
コードも互換性がないので変更する
- this.$ga.event(category, "click")
+ this.$gtag("event", "click", {event_category: category})
Vue.js 2 系の場合
import VueGtag from "vue-gtag"
Vue.use(VueGtag, {
config: {
id: "UA-XXXXXXXXX-1",
},
+ includes: [
+ { id: "G-XXXXXXXXXX" },
+ ],
})
vue-gtag は古い Vue.js で動く 1 系を使うこと
includes の方に新しいIDを追加する
VuePress 1 系の場合
@vuepress/plugin-google-analytics は2専用なのかわからないが動かない
とりあえず config.js 経由で head に埋める
既存のタグがある場合は gtag を二つ書く
module.exports = {
head: [
['script', { async: true, src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX', }],
['script', {}, ["window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-XXXXXXXXXX);"]],
],
}
-
正確には依存していた vue-analytics が終わったらしい ↩︎
Discussion