LCCNET 聯成電腦

m_nav_line m_nav_line

聯成電腦分享:將所有的網站導入GoogleFirebase一起分析數據

icon_fb icon_twitter icon_google
article_main_img

Photo credit:Pexels

 

 

 

文、意如老師

 

 

續上一篇:聯成電腦分享:你的網站GA了嗎?Google Analytics網站分析教學

 

上一篇我們使用Google Analytics只是針對一個網站來做分析,但是如果我們有很多網站很多專案是否可以導入一起分析呢?

答案是可以的,本篇將實作把所有的網站導入GoogleFirebase一起分析數據

 

 

 

建立專案:

首先到下列網址:

https://console.firebase.google.com/u/0/

點選建立專案按鈕

 

 

 

 

先輸入專案名稱:

取一個跟專案有相關的名字後,看完並接受Firebase條款後按下繼續按鈕。

 

 

 

 

了解將Firebase新增至GoogleCloud專案時的注意事項,並按下繼續按紐。

 

 

 

 

 

設定GoogleAnalytics  分析的帳戶,選擇或建立(可參考上一篇文章)

 

 

 

 

 

選擇帳戶或建立帳戶完成後按下繼續按鈕,即可看到Firebase的後台

新增應用程式:

接著開始新增應用程式,點選</>按鈕

 

 

 

 

接下來將Firebase新增至你的網頁應用程式,需要填一些註冊應用程式需要的資料。

 

 

 

 

填完暱稱,並勾選ㄧ併為這個應用程式設定Firebase代管功能後,按下註冊應用程式。

 

 

 

 

第2步驟就可以新增FirebaseSDK到你的網頁應用程式

 

 

 

 

直接複製firebaseSDK中的程式碼,複製到自己網站<Body>標記的最下方處即可,也可參考下列網址設定:

https://firebase.google.com/docs/web/setup?authuser=0

https://firebase.google.com/docs/reference/js/?authuser=0

https://firebase.google.com/docs/samples/?authuser=0

最後按下ㄧ步安裝FirebaseCLI,即可自動部署至Firebase代管。

完成後會回到主控台於下列網址:https://console.firebase.google.com/

 

 

 

專案設定:

點選左上角專案總覽的專案設定

 

 

 

 

找到Firebase SDK snippet >> CDN

 

 

 

 

複製程式碼到我們網頁全域的地方

 

 

 

 

接下來只要在有需要收集數據的每一張網頁都引入

 

 

只要在你有需要的網頁中引入後此頁程式碼後,就可以到後台中查看瀏覽的數據了。

 

 

 

設定按鈕事件:

在Firebase中也可以設定按鈕事件,到後台點選Events>在現有的事件中增加事件

 

 

 

 

 

接下來到程式碼中,找到按鈕元件後加入點擊事件,例如先建立一個下載按鈕。

<button id = "btn-download">下載</button>

 

再來幫這個下載按鈕添加事件,只要加上下列這行程式碼即可

firebase.analytics().logEvent('nnnnhihi');

 

 

完整程式碼如下:

<button id = "btn-download">下載</button>

<script>

var btnDownload = document.getElementById('btn-download');

btnDownload.addEventListener('click', function() {

  alert("hi");

  firebase.analytics().logEvent('nnnnhihi');

 }, false);

</script>

 

 

 

程式碼加入參考示意圖:

 

 

 

 

新增轉化事件:

程式碼設定完成後,再回到主控台 >> Conversions,新增轉化事件,事件名稱為剛剛放在logEvent('')中的字串’nnnnhihi’按下保存及完成設定。

 

 

 

 

回到到主控台(Dashboard)即可看到所有目前事件的數據已經開始跑了。

 

 

 

 

事件加上參數:

如果想要更進階的設定一些事件例如幫你的按鈕再加上一些參數,例如產品名稱標題,價錢等等…可以再回到轉化(conversions)設定

 

 

 

 

在程式碼中將按鈕事件寫入firebase.analytics().logEvent()並帶入參數。

程式碼解析:

參數類型的值可以是一個字串,例如按鈕內容名稱可以以事件來命名

 

firebase.analytics().logEvent(‘我要購買ABC’) ;

 

也可以有key 跟 value,例如按鈕內容的類型跟id

firebase.analytics().logEvent(

{

                content_type:'event_buy',

                content_id:'myid_a001',

})

 

 

如果資料很多,參數也可以帶入陣列類型,例如

firebase.analytics().logEvent(

items:[{

                goodname:'購買abc',

                price:123,

}]

)

 

 

參數帶入時也可混合所有類型的值非常彈性方便,例如

firebase.analytics().logEvent(

'我要購買ABC',{

                content_type:'event_buy',

                content_id:'myid_a001',

                items:[{

                        goodname:'購買abc',

                        price:123,

}]

 

 

了解了以上參數帶入方法後,最後整合至程式碼中。

程式碼如下:

<button id = "eventlog">我要購買ABC</button>

<script>

var eventlog=document.getElementById('eventlog');

eventlog.addEventListener('click',function(){

        alert("紀錄事件:我要購買ABC");

        firebase.analytics().logEvent('我要購買ABC',{

                content_type:'event_buy',

                content_id:'myid_a001',

                items:[{

                        goodname:'購買abc',

                        price:123,

                }]

               

        });

},false);

 

</script>

 

 

 

 

同時在Analytics(分析) 同步更新

 

 

 

 

結論:

假設你只有一個專案的話你可以使用Google Analytics,但如果我們同時有很多網站或很多專案就可以直接導入GoogleFirebase(可以把多個專案Google Analytics導入進去)一起使用GoogleFirebase來統一管理分析數據。

 

 

 

文章轉自 菜鳥救星,未經授權請勿轉載,原文為:將所有的網站導入GoogleFirebase一起分析數據

 

 

 

 

 

FB粉絲團:https://www.facebook.com/lccnetzone
YouTube頻道:https://www.youtube.com/user/LccnetTaiwan

痞客邦Blog:http://lccnetvip.pixnet.net/blog

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策