【NuxtとWP】Google Analystic(GA4とUAの違い)とGoogle Search Consoleの連携【使い方】

プログラミング学習

Google Analystic、Google Search Consoleの使い方です。アプリ開発(Nuxt)とブログ(WordPress)の両方をやっていますので、そのメモ書きになります。

特集:フリーランスWebエンジニアのための週2からのリモートワーク

NuxtでGoogle Analysticとサチコの使い方

GA4とUAの違い

GoogleがGoogle Analystic4(GA4)を2020年10月にリリースしたようです。今後、新規のものはGA4を導入します。UAは技術的にCookieデータを取得していましたが、近年、Cookieの制限によりどんどんデータが取得できなくなっているようです。

併用もありです。

なお、GA4はGoogle Search Consoleと連携できないようです。Googleからの発表はなくまだどうなるかわかりません。

Google Analystic側の設定

こちらの記事が画像つきで解説しています。他のサイトと違って、はしょって説明していなかったのでよかったです。

Googleアナリティクスのプロパティとは？プロパティの作成、設定方法 | Googleアナリティクス
Googleアナリティクスのプロパティは、収集するアクセスデータを定義する役割を持ちます。クロスドメイントラッキングなど、アクセスデータ取得の土台となる設定です。この記事では、Googleアナリティクスのプロパティの作成、設定方法や、設定する上での注意点を解説します。
blog.siteanatomy.com

vueの場合、最後に測定IDを取得します。

Nuxt側の設定(@nuxtjs/google-gtagとvue-gtagの違い)

analytics.js(nuxtの場合、vue-analyticsを使われることが多いらしい)ではなく、gtag.jsで対応しました。gtag.jsが新しい仕様に対応したものです。

こちらの記事を参考にしたら簡単にできました。

NuxtでGoogleアナリティクス（gtag.js）を実装する - Qiita
はじめにNuxtで作ったサイトにGoogleアナリティクスを入れる方法です。いろいろ記事はありますが、Googleアナリティクスの最新のタグ形式（2019年2月13日）であるgtag.jsを使用したものがあまりなかったので...
qiita.com

ローカルでも、次のようなソースコードが確認できる。

script data-n-head="1 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

ただ、ちょっと切り分けがややこしいのですけど、G-からはじまるGA4の測定IDは動かないようです。上記はUA用です。(追記)上記の方法でもG-をみるようになったようです。デプロイ後、GAのリアルタイムに自分が表示されているようだったので。ただ、隣の県だったので場所がずれていますね。。ありそうなことですけど。

もしもうまく動かないときは、vue-gtagというものもあるので試してみてください。

setup Google Analytics 4 in nuxt.js
I'm having issues setting up a new Google Analytics 4 (GA4) account with Nuxt. Everything seems configured ok based on tutorials, however my traffic doesn't sh...
stackoverflow.com

NuxtのGoogle Search Consoleの設定

urlプレフィックスならnuxt.config.jsに、ドメインプロパティならDNSの設定が必要かと思っていました。

けれど、urlをいれると所有権を自動確認しましたとでました。gtag.jsのおかげ?googleの仕様変わった?詳しく調査していないけど様子をみます。

カスタムドメインの独自ドメインです。ドメインプロパティとurlプレフィックスのどちらも自動確認できました。

構成はgoogleのfirebaseとnuxtです。

スポンサーリンク

Google Search Consoleの使い方(共通知識)

google search consoleはドメインとurlプレフィックスはどっちを選ぶ？

登録時に設定が増えました。

ドメインプロパティはサブドメインを含めて一括管理みたいですね。http、https、サブドメイン全部同ドメインです。ホームページとブログが同ドメインなら一元管理してもよさそうですね。一元管理の方が一か所みればいいだけなので、基本的に使い勝手はいいはずです。

ドメインの追加はhttps://ebookbrain.net/ではなくebookbrain.netと入力しないと続行できません。

また、ドメインプロパティの場合、各サーバーの管理画面からDNSの設定をする「必要があり、やや面倒です。

urlプレフィックスはどういうときに使うかというと、レンタルサーバーが提供しているサブドメインやアメブロみたいな無料ブログはurlプレフィックスということでしょうか。

ただドメインプロパティはDNSの設定をいじるため、レンタルサーバーの引っ越しなどの際にもまた面倒な気がします。

ドメインプロパティのメリットと言われるアドレスがまとめられるですが、現在は基本httpsのみです。そうでない場合もドメインに常時転送しておけばOKです。そのため最近はurlプレフィックスを使うことにしています。

口コミはこちらです。

スポンサーリンク

Google AnalysticとGoogle Search Consoleの使い方(WordPressめも)

wordpressを含め、一般的な使い方のめもがきです。

google analyticsのアカウントとプロパティの違い

google analyticsにサイトを追加するとき、アカウントとプロパティをどうするか考える必要があります。プロパティを追加する方法しか知らない人もいるかもしれませんが、アカウントという上位階層があります。

アカウント
-プロパティ(サイトa)
-プロパティ(サイトb)
-プロパティ(サイトc)
アカウント
-プロパティ(サイトd)
-プロパティ(サイトe)

プロパティに作る場合、IDが連番になります。アカウントに作る場合、別のIDになります。同じようなサイトは同アカウントでプロパティを追加してもいいかもしれませんし、まったく違うサイトはアカウントを分けてもいいかもしれません。わかりやすさによるところが大きいかもしれません。

Googleのアカウントはひとつで大丈夫です。

google analyticsのサイト追加「新しいアカウントを作成」と「新しいプロパティを作成」

上記の構成を考慮の上、「新しいアカウントを作成」と「新しいプロパティを作成」のどちらで作成するかを決めて作成します。

画面左下の管理 > アカウント > 新しいアカウントを作成
画面左下の管理 > アカウント > 新しいプロパティを作成

*画面右上の人のアイコンにある、アカウントの追加はGoogleアカウント管理なので、違います。
*アカウント名はアカウントの設定で名前を変更することができます。

新しいアカウントを作成の項目いつもはとくに迷う部分がないため、割愛。トラッキングコードを取得します。データ共有設定はチェックをいれたままにしています。

google search consoleの追加

キーワードがnot providedになり見れなくなったため、見たい人はそのままgoogle search consoleを追加。google search console略してサチコとも呼ばれるみたいですね。

なお一時的に所有権が確認できない場合でも、Google Search Console側にデータは蓄積されているようです。ただ、見れないだけです。

google search consoleで検索 > ログイン > プロパティを追加 ドメイン名を入れる　　別の方法 > HTMLタグ

<meta name="google-site-verification" content="XXXXXX(個別コード)XXXXXX" />

headの手前にタグを挿入後[ 確認 ]をおします。

なお、cocoonの場合はcontentの部分だけ管理画面から設定すればOKです。詳細はこちら!

おしゃれにコクーン(cocoon)のデザインをカスタマイズ
現在、ebookbranではコクーン(cocoon)を利用しています。おしゃれにコクーン(cocoon)のデザインをカスタマイズしています(まだまだ道半ば)。まだ整理中のところもありますけど、いろいろとCSSをのっけています。デザインは主に...
ebookbrain.net

google search consoleのプロパティを削除

プロパティの削除は次のとおりです。

該当ドメインを選択 > 設定 > プロパティを削除

google analyticsとgoogle search consoleの連携

google search consoleのキーワードは使い勝手があまりよろしくないため、google analyticsと連携します。google search consoleはキーワード検索で絞り込み検索ができません。

集客 > Serch Console > 検索クエリ > Search Consoleのデータ共有設定 > Search Consoleを調整 > 追加 > 関連づけるドメインを選択 > 保存

そうすると、

集客 > Serch Console > 検索クエリ

からキーワードを確認できます。しばらく時間がかかるため翌日でもみましょう。

SSL化後、「Search Consoleを調整」を再び行う場合は削除して追加する

SSL化したのち、Search Consoleを調整でアドレスを変更したい場合があります。

検索クエリをみると、すでにあるキーワードが表示されてしまうため、別のルートからSearch Consoleを調整をします。微妙な仕様ですね。。

下記のように一度削除して追加します。

左下の歯車アイコン > プロパティのプロパティ設定 > Search Consoleを調整 > 削除 > 削除 > ok > 保存

削除すると、追加に変わります。

Search Consoleを調整 > 追加 > httpsのアドレスを選んで「保存」

切り替えは即時反映されないようなので、しばらくしたのち、確認しましょう。

google search consoleの保存期間は16ヶ月だけど、Google Analysticは?

サーチコンソールのデータは3ヶ月までしか保持されません。

16か月に伸びました。さすがに短いと思っていたのでよかったです。

Google Analysticと連携しても参照しているだけのため、検索クエリのキーワードは16か月を過ぎれば表示はされません。数日ずれることはあるみたいです。。

つまり保存するぐらいしか回避策がないわけですね。

urlプレフィックスのサブドメインを入力すると所有権を証明できませんでした。

urlプレフィックスで階層を掘っている場合は階層と/を忘れずに。

https://ebookbrain.x0.com/
https://ebookbrain.x0.com/blog/

さくらインターネットではあるかもしれません。

テーマを変えたときgoogle analyticsの設定を忘れなように

テーマを変えたときgoogle analyticsの設定を忘れなようにしましょう。プラグインに設定しているなら大丈夫です。

google search consoleのエラー：現在選択しているプロパティ内で URL を検査するか、プロパティを切り替えてください

現在選択しているプロパティ内で URL を検査するか、プロパティを切り替えてください

ログアウト、ログインで修正されました。

コメント