52
打造移動端網站,掌上流量一網打盡 關注我們 : 微信: 谷歌广告 (ID: AdWordsOfficial) Line: Google AdWords (ID: @adwordstw) FB: Google AdWords (/gcnadwords) AdWords Greater China http://www.youtube. com/c/AdWordsGreaterCh ina 微信: 谷歌广告学院小助手 (/gcnadwords) +Jakob 微信講師

#3月瘋行動 打造行動網站,掌上流量一網打盡

Embed Size (px)

Citation preview

Page 1: #3月瘋行動 打造行動網站,掌上流量一網打盡

打造移動端網站,掌上流量一網打盡

關注我們 :

微信: 谷歌广告(ID: AdWordsOfficial)

Line: Google AdWords(ID: @adwordstw)

FB: Google AdWords(/gcnadwords)

AdWords Greater Chinahttp://www.youtube.

com/c/AdWordsGreaterChina

微信: 谷歌广告学院小助手(/gcnadwords)

+Jakob 微信講師

Page 2: #3月瘋行動 打造行動網站,掌上流量一網打盡

經典课程回顧行動 SEO大揭秘: 讓網站和 app在手機搜尋結果中脫穎而出

回顧文章 https://goo.gl/jivK4c

您可以訪問我們的官方社群,了解3月活動詳情。https://goo.gl/af7DUy

Page 3: #3月瘋行動 打造行動網站,掌上流量一網打盡

第 2 部分 效能的意義和重要性

議程

第 1 部分 效能:移動端網站的前提

第 3 部分 除了效能之外

第 4 部分 移動營銷要點

專屬機密資訊

Page 4: #3月瘋行動 打造行動網站,掌上流量一網打盡

關於「移動端網站」的官方更新

Page 5: #3月瘋行動 打造行動網站,掌上流量一網打盡

行動網站可帶給品牌諸多好處

一次打造出所有裝置通用的管道使用者將能透過 iOS、Android 或任何一種內建瀏覽器的平台存取您的行動網站

適應性只要製作一個回應式網站,就能同時在手機和平板電腦上存取,不需要再為這兩種裝置分別製作專屬的應用程式

縮短開發時程易於更新 (使用者不需要接受或安裝更新 )

節省開發成本行動網站採用單一編碼語言 (HTML),因此開發成本通常較低

人人皆可存取

不需要核准或分享收益,也不必透過市集取得

更容易追蹤不需要安裝 SDK,就可以為行動網站導入 Analytics (分析)/轉換追蹤功能

Page 6: #3月瘋行動 打造行動網站,掌上流量一網打盡

第 1 部分

專屬機密資訊

效能

移動端網站的前提

Page 7: #3月瘋行動 打造行動網站,掌上流量一網打盡

「改版後的 Seamless 網站還沒有原來的好

用,社交媒體上怨聲四起。

但是,這家美食外賣網站還犯了一個更大的

錯誤,那就是沒提前宣佈網站改版...」

專屬機密資訊資料來源:取自 nytnow;www.wired.com

Page 8: #3月瘋行動 打造行動網站,掌上流量一網打盡

專屬機密資訊

per-for-mance (效能)/pərˈfôrməns/ 名詞

衡量行動、任務或作業方面的執行效果。

����������

Page 9: #3月瘋行動 打造行動網站,掌上流量一網打盡

智能手機效能有限使用者對移動設備有很高的期望

專屬機密資訊

不得不面對的現實...

網站速度越快 =效能越好= 收益越高

Page 10: #3月瘋行動 打造行動網站,掌上流量一網打盡

40%的使用者會因為網站載入時間

超過 3 秒而放棄

47%的使用者認為

網頁載入時間應短於 2 秒

52%的使用者認為,載入速度是影響品牌忠誠度的一大因素

Google 機密與專屬資訊

硬把網路購物體驗照搬到行動瀏覽器,

後果將慘不忍睹,簡單講就是“放棄治療”。

Page 11: #3月瘋行動 打造行動網站,掌上流量一網打盡

Google 問卷調查:

「用行動裝置上網時,您最無法忍受哪一點?」

影片無法播放

重新導向到首頁

網頁載入龜速

看到插頁式廣告

其他

14%13%

46%16%

11%

資料來源:Google Webmaster Central Blog (Google 網站管理員中心網誌):《#MobileMadness: a campaign to help you go mobile-friendly》(#MobileMadness:廣告活動能提升網站在

行動裝置上瀏覽的便利性,這是真的嗎?)。發佈時間:2015 年 4 月 27 日 專屬機密資訊

Page 12: #3月瘋行動 打造行動網站,掌上流量一網打盡

效能的意義和

優化思路

第 2 部分

專屬機密資訊

Page 13: #3月瘋行動 打造行動網站,掌上流量一網打盡

專屬機密資訊

「力求快速,越快越好」*

效能成功

* 眾多實際研究都指出 效能至關重要。

Page 14: #3月瘋行動 打造行動網站,掌上流量一網打盡

專屬機密資訊

效能成功

使用者體驗中的幾個關鍵點...

龜速使用者離開

可以忍受使用者留下

流暢使用者滿意

流暢投資報酬率?

* 眾多實際研究都指出 效能至關重要。

Page 15: #3月瘋行動 打造行動網站,掌上流量一網打盡

專屬機密資訊

效能成功

兼顧成功和效能:不太慢,夠快就行。

速度太慢

流暢使用者滿意

投資報酬率遞減

* 眾多實際研究都指出 效能至關重要。

Page 16: #3月瘋行動 打造行動網站,掌上流量一網打盡

專屬機密資訊

在行動世界,速度慢就沒有競爭力

網站放棄率高

跳出率高

轉換率低

留客率低

拖累檢索效率

編入索引的網頁較少

影響使用者體驗 拖慢 Google 檢索器的速度

Page 17: #3月瘋行動 打造行動網站,掌上流量一網打盡

研究顯示:

縮短網頁載入時間可顯著提高銷售額和轉換率

更快 = 更多轉換!

7 秒 > 5 秒

4 秒 > 2 秒

+24%

+4%

+2%

15 秒 > 7 秒

30%

資料來源:《A Beginner’s Guide to Website Speed Optimization》(網站速度最佳化新手指南) 專屬機密資訊

Page 18: #3月瘋行動 打造行動網站,掌上流量一網打盡

專屬機密資訊資料來源:SOASTA 個案研究 (2015 年 9 月 1 日)

180,000

160,000

140,000

120,000

100,000

80,000

60,000

40,000

20,000

0

1.7

1.6

1.4

1.2

1.0

0.8

0.6

0.4

0.2

0.01.2 1.5 1.8 2.1 2.4 2.7 3.0 3.3 3.6 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9

載入時間 (秒)

轉換率

(%)

工作

階段

工作階段 轉換率 (%)

1.9% 轉換率

1.5% 轉換率

個案研究:

行動網頁載入速度每縮短 1 秒,轉換率最多可提高 27%

Page 19: #3月瘋行動 打造行動網站,掌上流量一網打盡

理想的載入時間是

多久?

專屬機密資訊

Page 20: #3月瘋行動 打造行動網站,掌上流量一網打盡

““... 快或慢 0.25 秒網路商家就能與競爭對手分出高下,

這個網路載入時間差是一個神奇的數字。

- 微軟速度專家暨電腦科學家 Harry Shum

資料來源:《A Beginner’s Guide to Website Speed Optimization》(網站速度最佳化新手指南) 專屬機密資訊

Page 21: #3月瘋行動 打造行動網站,掌上流量一網打盡

資料來源:《Why Page Load Time Matters for Conversion Optimization》(為什麼網頁載入時間與轉換最佳化息息相關) 專屬機密資訊

1-2 秒:還不錯。

3-6 秒:尚可,但應改善。

7-10 秒:不好, 趕快改善。

10 秒以上:實在太差了。

- 轉換最佳化專家 Jeremy Smith

=

Page 22: #3月瘋行動 打造行動網站,掌上流量一網打盡

迎合手機使用者需求

消除採取行動的障礙

簡化結帳表單

精簡網站設計

不斷測試及實驗

將效能視為重點

連結效能和業務主要成效指標

設定效能預算,持續觀察調整

#致勝訣竅

轉換率很有可能提高

100% 以上 *

}

*資料來源:Criteo 的研究資料 專屬機密資訊

Page 23: #3月瘋行動 打造行動網站,掌上流量一網打盡

Amazon 的

「客戶從想買到購買的過程

只需不到 30 秒。」- Amazon

1 #致勝訣竅

實際數據:Amazon 的下載時間每縮短 100 毫秒,營

收就提高 1%。

資料來源:mobilecommercedaily.com;《Eliminating the speed delays with mobile Web shopping》(解決行動網站購物服務速度遲緩的問題) 專屬機密資訊

Page 24: #3月瘋行動 打造行動網站,掌上流量一網打盡

+ 將效能視為首要訴求

+ 啟動時間縮短了 70%

2 Netflix 的 #致勝訣竅

資料來源:techblog.netflix.com 專屬機密資訊

“「我們深信,卓越的效能不是可有可無的工程目標,

因為它是實現優異使用者體驗的必要條件。」

- Netflix 使用者介面工程部門經理 Kristofer Baxter

Page 25: #3月瘋行動 打造行動網站,掌上流量一網打盡

+ 網頁載入時間加快了 2 秒 (縮短了 80%)

+ 伺服器呼叫次數減少了 400%

+ 流量增加了 83%

+ 網站停留時間中位數提高了 32%

+ 廣告互動率提高了 108%

4 GQ 的 #致勝訣竅

資料來源:Digiday.com 專屬機密資訊

Page 26: #3月瘋行動 打造行動網站,掌上流量一網打盡

RAIL

回應 (Response)

動畫 (Animation)

閒置 (Idle)

載入 (Load)

效能模式

專屬機密資訊

Page 27: #3月瘋行動 打造行動網站,掌上流量一網打盡

除了速度之外還需要做些什麼?

第 3 部分

專屬機密資訊

Page 28: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary

簡化轉換程序

每個網頁都必須提供站內搜尋功能

表單欄位越少越好

首頁導覽介面應一目瞭然,且要適合透過行動裝置瀏覽

重視每個網頁的便利性及外觀

入門訣竅:

持續分析並最佳化您的行動網站

注重使用者體驗,才能確保成效

Page 29: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary

首頁及導航

站內搜索

視覺效果

內容易用性

表單

5個考量維度

Page 30: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary

原則1 : 減少網頁內容,保持導航選單精簡有力

Page 31: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary

原則2 : 站內搜尋功能擺放在顯眼位置

Page 32: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary

原則3 : 讓使用者知道最適合瀏覽網站的畫面方向,使用高解析度圖片

Page 33: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary

原則4: 讓使用者在同一個瀏覽器視窗上,就能完成一切動作

Page 34: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary

原則5 : 設計效益良好的表單,為每項作業選用最簡單的輸入方式

Page 35: #3月瘋行動 打造行動網站,掌上流量一網打盡

專屬機密資訊

1. 圖片可佔去一般網頁內容量的 63%解決方式:選用適當的格式和大小,而且別忘了壓縮!

2. 20% 的網頁會送出超過 100 個資源請求

解決方式:縮短伺服器回應時間,運用瀏覽器快取功能 (這麼一來只需呼叫資源一次) 並合併資源 (減少往返次數)。

3. JavaScript 使用率劇增

瀏覽器必須下載及剖析請求,因此每增加一項請求,網頁顯示過程的複雜程度

就提升一分。

解決方式:找出適合使用 JavaScript 的最佳時機, 並審核主要網頁的效能,瞭解這些網頁使用 JavaScript 的程度。

4. 高達 50% 的行動網頁都採用自訂字型

字型導入方式不良或由外部代管都會導致效能低落。某些字型會用到大量 CSS 程式碼,有些則必須有 JavaScript 才能運作。

解決方式:為智慧型手機停用自訂字型。如果真的需要運用這類字型,建議只

在標題和重要的文字版面元素中使用。

常見的移動端殺手

5. 20% 的網頁的重新導向超過 5 次重新導向 = 效能低落 = 使用者嚴重不便

解決方式:使用這個搜尋引擎最佳化工具來審核網頁效能,找出所有的

重新導向。

6. 包含 HTTPS 請求的網頁數量增加 5 倍HTTPS 請求需要通過額外審查來驗證其真實性 = 拉長網路延遲時間 (要是伺服器設定不當,還會影響載入時間)

解決方式:運用 ssllabs.com 等網站對網址執行 SSL 伺服器測試,確

認伺服器和憑證的設定正確無誤。

資料來源:The Performance Beacon - The web performance, analytics, and optimization blog (成效定位器:網路成效、分析及最佳化網誌)

Page 36: #3月瘋行動 打造行動網站,掌上流量一網打盡

如何進行移動端

廣告推廣

第 4 部分

專屬機密資訊

Page 37: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary 2013 美国参照数据

手機上的廣告成效

Page 38: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary*

在手機上,前2名的廣告佔了大部分的點擊

提高行動裝置出價,讓廣告出現在手機搜尋頁面頂端

1

Page 39: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary*

• 複製現有的文字廣告• 行動裝置,打勾• 最終到達網址修改為行動版網址(若不同)• 修改文字描述:精简、清晰

2. 建立適合顯示在行動裝置上的廣告2

Page 40: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary*

來電額外資訊應用程式額外資訊

3. 加上網站額外資訊、來電額外資訊、地點額外資訊3

Page 41: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary

320 x 50

300 x 250

320 x 100

4. 最適合手機的廣告尺寸4

Page 42: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary*

透過AdWords追蹤手機上的廣告成效5

Page 43: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary*

追蹤每個關鍵字在手機上的表現6

Page 44: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary

跨裝置的轉換次數7

Page 45: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary

利用不同裝置接觸消費者,吸引有興趣的消費者再回訪

再營銷變得非常重要7

Page 46: #3月瘋行動 打造行動網站,掌上流量一網打盡

Confidential + Proprietary*

行動就是趨勢手機就是商機

建立行動版網站1. 提昇網頁速度

2. 減少網頁內容,保持選單精簡有力

3. 站內搜尋功能擺放在顯眼位置

4. 讓使用者知道最適合瀏覽網站的畫面

方向

5. 使用高解析度圖片,避免讓使用7. 者雙指收合縮放畫面

6. 讓使用者在同一個瀏覽器視窗上,就

能完成一切動作

7. 讓使用者在同一個瀏覽器視窗上,就能完成一切動作

手機上的推廣秘訣1. 提高出價、排名

2. 建立適合行動裝置廣告內容

3. 添加額外資訊

4. 適當的廣告尺寸

追蹤手機上廣告成效1. 低CPC,高CTR

2. 利用Google AdWords追蹤不同裝置 / 關鍵字成效

3. 跨裝置轉換,利用再行銷提升廣告成效

Page 47: #3月瘋行動 打造行動網站,掌上流量一網打盡

Proprietary + Confidential

課程回顧文章(PDF下載+影片回顧)

https://goo.gl/cyseId

Page 48: #3月瘋行動 打造行動網站,掌上流量一網打盡

Proprietary + Confidential

Q&A時間

Page 49: #3月瘋行動 打造行動網站,掌上流量一網打盡

Proprietary + Confidential

問卷時間!

台灣:http://goo.gl/forms/s0LdgtGgHN

內地:http://goo.gl/forms/vbe7pdsbev

Page 50: #3月瘋行動 打造行動網站,掌上流量一網打盡

下期課程預告 2016 第一季產品更新介紹(語言: 普通話; 文字:繁體)

課程時間 3月21日

您可以訪問我們的官方社群,了解3月活動詳情。https://goo.gl/AokiLE

Page 51: #3月瘋行動 打造行動網站,掌上流量一網打盡

您隨時隨地的AdWords小幫手

通過下列方式,您可以與Google官方廣告專家分享交流,了解AdWords最新活動以及產品信息分享。

最新版 Google AdWords官方社群,超好用!https://www.zh.adwords-community.com/

Google AdWords微信帳號:谷歌广告 (ID: AdWordsOfficial) 或者掃描左侧 QR code 立即關注!

Google AdWords Line 官方帳號:(ID: @adwordstw) 或者掃描左側 QR code 立即關注!

Google AdWords YouTube 官方頻道頻道:AdWords Greater China

微信: 谷歌广告(ID: AdWordsOfficial)

Line: Google AdWords(ID: @adwordstw)

FB: Google AdWords(/gcnadwords)

AdWords Greater Chinahttp://www.youtube.

com/c/AdWordsGreaterChina

Page 52: #3月瘋行動 打造行動網站,掌上流量一網打盡

感謝您的參與!

+Jakob

專屬機密資訊