讓 Google 商家評論星等在網頁顯示﹍製作流程研究

前陣子接到需求，希望在網頁上顯示「Google 我的商家」使用者評論內容、及評價星等。這個概念引起我的興趣，因為會是有力的行銷工具。




現在商家經營 SEO 需要的手法比過去複雜很多，除了基本的網站要顧，Facebook 粉絲團也不能荒廢，如上圖，Google 搜尋結果也會顯示 FB 評比星等、投票數。




另一個經營重點就是「Google 商家」，搜尋結果側邊欄也有可能出現商家資訊、星等、評論等內容，這些都是潛在顧客評判是否光顧、詢價、聯繫、下單的重要依據。

經研究的結果，這樣的工具要在前端實現算是滿麻煩的，前後端都要處理，所以本篇無法提供安裝懶人包，只能提供研究後的心得整理了。

點此看範例網頁

一、製作原理

Google 提供了 Places API 可讀取商家的評論資料：

• 免費版本可顯示最新的 5 筆資料
• 使用上有限制，必須先申請 Google API key
• 無法從前端用 JS 讀取
• 需要先找出商家的 place ID

本篇的構想是製作一個側邊欄小工具，顯示商家評比平均星等，以及最新的 5 筆評論。

最後是成功做出來了，但問題很多：

• 因為 Places API 有跨域問題，無法從前端用 JS 讀取，必須利用「跨域代理伺服器(CORS)」處理，而第三方服務可能會有流量限制、或忽然關閉的可能性。
• 使用跨域代理伺服器後，竟然發現 Places API 免費版一天只能使用一次，除非啟用「信用卡計費功能」，免費額度才能提高。
• 免費額度及付費資訊請參考官網說明「Places API Usage and Billing」
• 開啟「信用卡計費功能」後的免費額度其實是滿高的，但是鑑於敢開啟的使用者應該不多，所以我放棄了純前端的處理方式。
• 改採「利用 Google 試算表當小型資料庫」的方式，由後端呼叫 Places API 取得資訊後，儲存在試算表，再由前端存取資料庫，這樣一天只要更新一次即可

以上是製作這個小工具要處理的問題及流程，看得懂的前端工程師應該可以實作出來。

二、準備動作

除了前、後端要寫的程式碼，處理 Places API 還有很多麻煩的流程，以下為整理紀錄：


1. 取得 Google API key

首先需要有一組 Google API key 才能存取 Google 商家的資料，可參考這篇教學，取得 API 金鑰：

• 取得 Google API Key(金鑰) 流程

請紀錄你的 API 金鑰，之後會用到。


2. 啟用 Places API

接續以上流程，回到「資訊主頁」：



如上圖，按「啟用 API 和服務」。




搜尋框輸入 "places api"， 下方會自動篩選出相關的 api，點擊最左邊那個「Places API」即可。




最後按「啟用」即可。


3. 取得 Google 商家 Place ID

接下來的流程不小心會卡關，注意圖文說明。請進入這個網頁：

• Place ID Finder

在上圖輸入框填入你登錄的 Google 商家名稱，才能正確搜尋到。字串正確的話，通常只會有一個搜尋結果，但如果有很多家分店的話，如上圖，請根據地址選擇正確的那一家。




選擇正確的地址後，如上圖反白的字串，就是 Place ID，請紀錄下來，之後會用到。

三、呼叫 Places API

完成前面的流程後，才能呼叫 Places API，例如使用 Google 試算表的 Apps Script 來執行：

https://maps.googleapis.com/maps/api/place/details/json?placeid=填入你的Place ID&language=zh-TW&fields=name,url,rating,reviews&key=填入你的 API key

• 紅色字串換成自己商家的 Place ID
• 藍色字串換成自己的 API key
• 以上參數可取得：商家名稱、網址、星等、評論資料

如果把網址貼在瀏覽器的話，取得的資料大致如下圖，再用 js 來處理 json 格式資料即可：

點此看範例網頁

四、補充說明

• 這個側邊欄小工具，從 DEMO 頁面即可看到前端程式碼
• 但後端程式碼需要自行處理，以及設定 Google Apps Script
• 如需發案代為處理的話可使用側邊欄聯絡表單與我聯繫

更多 Google 相關工具：