WordPress:Site Kit by Google 介紹及使用

/

寫在 Google AdSense 之前

如果你曾經來過 Let’s Write 本站,會發現本站這幾天出現聯播網廣告了。

主要是想用用看 Google AdSense,再配合 Google Analytics 的發布商報表,看一下報表會是長什麼樣子。

因為用 Google AdSense 時,驗證的部份是直接用 Site Kit by Google 這個外掛,所以覺得在寫使用 Google AdSense 之前,應該來寫一篇介紹一下這外掛的筆記。


Site Kit by Google 介紹

看了一下官網的 News,Google 在 2018.10.6 號就公告會有這個外掛,一直到 8 個月後,今年(2019)的 6.16,才公告推出 developer preview 版,再四個月後的 10.31 推出正式版。

Site Kit by Google 是一套可以跟 Google 網站相關的功能整合在一起的外掛,它可以整合的功能有以下:

不知道以後會不會再繼續增加功能,但 Augustus 在寫這篇時,看到可連結的功能是以上六項。

一開始用的時候有點疑惑,因為這些功能可以直接進到原本的頁面去,有必要一定要裝個外掛嗎?

後來安裝完,用了幾天後覺得蠻方便的,它主要就是讓我們可以不用再另外開那些頁去看資料,就能直接在 WordPress 後台中看到。

比方原本登入後台後,會看到的是 Jetpack 統計瀏覽資料的卡片,裝了 Site Kit 後會自動加上 Google Analytics 的卡片:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

wordpress登入後台可以看到GA
WordPress 登入後台可以看到 GA

另外,後台也會加開一個 Site Kit,直接顯示有連結的功能,像是本站連結了 Search Console、GA、AdSense、Speed、GTM,就會看到以下:

Site Kit dashboard
Site Kit dashboard

當然,更細的資料還是要進到原本的頁面去觀看,但每天如果想關心一下,直接看外掛整理出的清單資訊也夠用了。


安裝 Google Site Kit

Site Kit 的外掛頁面在這:Site Kit by Google

那當然,我們很少直接從外掛頁下載,一般直接進到 WrodPress 後台的「外掛 -> 安裝外掛」頁面裝會比較快。

進到「外掛 -> 安裝外掛」後,在右上角的「搜尋外掛」上輸入「google」,就會出現了:

搜尋google,出現外掛
搜尋 google,出現外掛

點下立即安裝,安裝完後再點啟用:

安裝完點啟用
安裝完點啟用

頁面會跳回到已安裝外掛的首頁,這時左側選單也會加上一個「Site Kit」:

wordpress選單新增了Site Kit
選單新增 Site Kit

點進選單上的 Site Kit,會看見一個外掛啟用,但仍需要安裝的訊息:

需要安裝的訊息
需要安裝的訊息

點擊「START SETUP」就會開始連結 Google 的功能。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

連結的第一步,就是要先登入 Google 帳號,這邊記得是登入有 GA、Search Console 權限的,之後 GA 的部份才可以直接使用:

登入Google帳號
登入 Google 帳號

登入後,會有幾項權限需要授權,都按允許後才能進到下一步:

授權1/3
授權 1/3
授權2/3
授權 2/3
授權3/3
授權 3/3

登入完 Google 帳號後,下一步就是要確認你登入的 Google 帳號,是這個網站的擁有者:

驗帳Google帳號有Search Console的權限
驗帳 Google 帳號有 Search Console 的權限

按下「Proceed」後,因為 Augustus 登入的 Google 帳號本身就是 Search Console 的管理員了,這一步就會直接通過,到下一步:

通過驗證到下一步
通過驗證到下一步

這一步就是允許 Site Kit 可以取用 Search Console 的資料,按下「Allow」,就會看到設定完成的頁面:

設定完成
設定完成

按下 Go to my Dashboard 後會回到 WordPress 後台,就會看到 Search Console 的資料呈現在後台上:

wordpress連結完Search Console
WordPress 連結完 Search Console

呈現的頁面上也會提示可以連結到其他功能,上圖紅框中的三個就是,連結方式都跟前面一樣,登入 Google 後需要的權限都按允許就行。以下繼續說明連結 GA 的部份。

連結 Google Analytics

連結完 GA 後,後台上會要選擇是抓 GA 中哪一組 GA 帳戶:

確認要讀哪一組GA帳戶
確認要讀哪一組 GA 帳戶

選擇完後按下「CONFIGURE ANALYTICS」,回到後台就會看到 Analytics 是「Connected」的狀態:

Analytics是「Connected」
Analytics 是「Connected」

連結完 GA 後,有一件事情很重要,就是 Site Kit 在連結完 GA,會自動加上追蹤碼到頁面上,如果你的網站原本就有埋 GA 追蹤碼,就會變成重複埋了一次,你的數據就會不正常,會變成2倍。

因此我們必須要選擇,埋 GA 的方式是沿用原本的,還是讓 Site Kit 埋?

本站的 GA 是用 GTM 埋的,就必須要關閉 Site Kit 加的追蹤碼,關閉方式如下:

1 左側選單中點選「Settings」

選單中點選「Settings」
選單中點選「Settings」

2 右側會出現 Site Kit 有連結的功能,點選「Analytics」

點選「Analytics」
點選「Analytics」

3 展開的選單中點選「Edit」

點選「Edit」
點選「Edit」

4 「Do you want to remove the Analytics snippet inserted by Site Kit?」選擇「Remove snippet」,按下CONFIGURE CHANGES

選擇「Remove snippet」
選擇「Remove snippet」

最後看到 GA 標「Snippet is not inserted」就行了:

Snippet is not inserted
Snippet is not inserted

加裝更多功能

如果用了 Site Kit,基本上 Search Console、Google Analytics 這兩個建議必裝,主要是看網站成效的。

那像本站有裝 GTM,原本是用別的外掛在埋碼,裝了 Site Kit 後就用 Site Kit 了。

完整的 Site Kit 可以連結的功能都在 Settings 裡,點選左側選單的「Settings」:

選單中點選「Settings」
選單中點選「Settings」

右側會出現目前有連結到的功能,頁籤點中間的「CONNECT MORE SERVICES」:

點中間的「CONNECT MORE SERVICES」
點中間的「CONNECT MORE SERVICES」

就會出現還可以連結的功能:

還可以連結的功能
還可以連結的功能

這邊建議 PageSpeed 也可以裝,了解一下網站的速度。


筆記後心得

Google 官方出的整合各功能的 Site Kit,在用的時候,展現報表時風扇突然轉了起來,似乎是計算時很耗資源。看來目前這版還有很多可以優化的空間,就期待 Google 會陸續改善了。

Summary
WordPress:Site Kit by Google 介紹及使用
Article Name
WordPress:Site Kit by Google 介紹及使用
Description
本篇大綱:寫在Google AdSense之前。Site Kit by Google介紹。安裝Google Site Kit。連結Google Analytics。加裝更多功能。因為本站裝Google AdSense驗證的部份是用Site Kit by Google這個外掛,因此先來寫一篇介紹一下這外掛的筆記。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Analytics Google

Google Analytics 事件追蹤設定

Vue

用 VuePress 製作說明文件頁面 – 2:config.js 基本設定

WordPress

Ubuntu 安裝 WordPress – 1:VirtualBox、Ubuntu 20.04

Firebase Google

Firebase Performance 使用筆記

Analytics Google

GA:User-ID 功能 設定及報表檢視

Google Others

Google Optimize A/B Testing 使用筆記

Vue

D3.js、Vue 畫一個台灣地圖

Forms Google

Google 表單,提交後系統自動寄送回覆通知 email

Front-End

OSM + Leaflet 學習筆記1:建地圖、marker、事件、換圖層

Front-End

漸層色按鈕 Hover 效果

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言