轉化提高5倍，如何從用戶思維出發搭建著陸頁？

04-29

前言

我在上一篇文章曾經講過，轉化是一個漫長而糾結的過程：

有一些產品的價格比較高，用戶是不會在第一次看到廣告就會做出決策的，當你在實際工作時會面對多個渠道的推廣，究竟哪些渠道是有助於實際轉化的？哪些廣告是用於收集銷售線索的？用戶經歷了哪些渠道才完成了轉化？這個問題Google給出了一個漂亮的解決方案，但是除了渠道的優化以外，當你完成了用戶調查時，做出了第一稿的著陸頁（LP），如何去進行後續的調優呢？又或者，在製作LP的時候有沒有什麼好的工具可以完成快速上線？而不必因為排期的問題而造成營銷的滯後？接下來我會為大家分享幾個自己在用的神器給大家，以及分享一些自己使用的心得

實用工具服務介紹

Google Analytics（免費）

這個工具毋庸置疑，如果你有幸對比過GA和百度統計，你會發現GA比百度統計的功能要更加豐富和完善。而其中多渠道歸因更加是在你搭建流量矩陣的時候，了解轉化路徑的一個非常重要的工具，詳細的介紹可以搜一搜我這篇文章——可能90%的營銷人員都會忽略的分析工具

Google Tag Manager（免費）

這是Google提供的另一大神器，它的優勢有兩個，其一是在部署過Tag Manager的頁面，可以很方便地加入或者刪減監測代碼或者營銷代碼，其二可以更加深度地自定義GA的功能。一次部署的話可以不用再去頻繁地找技術人員去加減代碼。尤其是當我接觸海外業務以後，發現光是營銷類的平台就數都數不過來，並且有很多不同的代碼，例如再營銷的代碼你會希望能作用在更有潛力的客戶身上，而不必浪費錢去投放給路人用戶，因此自定義條件也是Tag Manager的好處之一。

PTengine（5萬pv內免費）

這個神器是飛月同學介紹給我的，在他的文章中有他的公眾號可以拿到邀請碼。這個工具的好處在於對頁面的熱度進行分析，通過分析可以知道著陸頁哪一部分被點擊得最多，新老訪客都會去看哪些欄目，這個對於營銷流程的培育是非常重要的。關於它的用法，飛月君在他發布的帖子《實戰分析｜90%的人沒有從用戶視角去做推廣》中有所提及，有興趣了解他是如何提升著陸頁轉化率的也可以前去圍觀。

Autopilot（收費）

這個是實現營銷自動化的好工具，對於需要收集銷售線索之後跟進培育的業務特別適用。一方面可以設定完整的生命周期郵件或者簡訊來對已經填寫表單的用戶來進行適時營銷，在滿足設定的條件以後自動觸發某些功能來促使用戶進入下一個營銷環節。而且它完全是圖形化實現，這樣可以讓業務人員節省更多的精力去跟進一些高評分的用戶，而時機尚未成熟的用戶可以維持保持跟進的狀態。

Instapage（收費）

這是一個製作著陸頁的好工具，相比strikingly，它已經預備了一些主流的integrations，只要做一些簡單的接入即可實現CRM系統或者mailchimp等郵件系統。而我們作為市場營銷人員卻不用花時間去學習複雜的HTML或者js代碼，通過這個工具，最快當天就能實現著陸頁的上線，還可以對頁面進行A/B測試，簡單部署GA代碼，再結合上述的工具幫助你實現最大化的轉化。

前期的頁面搭建

接下來就是根據營銷思維去一步一步地實現你的營銷過程，對於用戶調查部分就不細說了。直接跳到內容製作和內容調優部分當中來：

第一步，用Instapage來搭建所需要的著陸頁，它是一個拖拽式的網頁生成工具，即便是載入速度略慢了一些，但是時效性可以彌補這一缺陷。如果你是有點HTML基礎的同學，那麼自定義的HTML和css代碼可以更加豐富你所製作的內容呈現方式。它本身提供30天的試用，推薦使用55美金的高級版本，會讓你更加得心應手。關於一些著陸頁的設計心得我會在後面分享。

第二步，接入TagManager（簡稱GTM，後同），如果你使用的是Instapage，那麼這步的接入非常簡單，只需輸入配置好的GTM對應的容器ID（如「GTM-XXXXXXX」）即可。

如果是公司自建的網站，也可以讓你們的網站開發人員幫你把代碼載入進去。注意它是分兩部分的，一部分是插入在標籤之後，另一部分是標籤之後。不懂也沒關係，告訴開發人員需要放進這兩部分即可。

第三步，在GTM配置好以後，接下來就可以直接在GTM的後台操作，對於GA的接入也非常簡單，GTM已經內置了若干個常見的營銷或者監測代碼的介面，這時候你只需要來到GA的後台，找到」UA-XXXXXXX-XX「字樣的識別碼，把它填到GTM的後台中，就可以完成配置。

這時候可以選擇預覽模式，如果使用Chrome的話還可以安裝一個叫Tag Assistant的插件，它可以直觀地告訴你該頁面是否生效，每次需要手動開啟，不過簡單地配置一下就可以在指定的網頁上面配置自動開啟，方便你檢查該頁面的代碼是否生效了。這裡需要注意的是，這時候狀態依然處於測試狀態，如果需要在真實環境下生效的話一定要按發布才會生效。

第四步，配置PTengine。申請賬號的方法不細說，這裡著重講配置，同樣他們會提供統計代碼，設置相關的域名，這個只需要按照步驟一步一步填即可。代碼的部分則需要回到GTM，選擇自定義代碼，把PTengine的代碼，這一部分涉及比較專業的知識，初入門你可以將觸發器選擇為All Pages，代表的是所有頁面都載入。當你漸漸熟悉正則表達式以及對業務和代碼的作用有一定了解後，你可以嘗試對GTM裡面的功能進行自定義。

第五步，配置Autopilot，在註冊之後有30天的免費試用，而發布到真實環境下測試是需要和對方寫申請的。不過他們的申請要求寫得很模糊，當初折騰了我許久，最後發現只需要提供一個LinkedIn的個人賬號給他們即可。收費方面其實也不貴，1000個list是240美金一年，摺合20美金一個月。你完全可以試用30天以後再決定是否要付費。

第六步，完成這部分的配置以後，可以在Settings裡面找到Tracking Code的選項，根據實際情況去選擇For Web Pages（網頁使用）還是For Apps（APP使用）。我們現在使用的是網頁版所以選擇前者。當然如果你所負責的業務是APP和網頁版並存的，那麼可以將這兩部分的賬號打通，完善跨屏跟蹤。

拿到跟蹤代碼以後，就可以回到GTM裡面新增代碼，方法步驟可以參照第四步

這時候你就可以回到著陸頁訪問，如果配置成功的話將可以在後台看到下圖所示的行為流。沒有打碼的部分是我測試的行為，不涉及機密，所以大家可以通過截圖了解一下對於單個用戶的行為流記錄。

用戶生命周期

這部分比較個性化，畢竟每個公司的業務都具有獨特性，可以在AP的Journeys裡面配置適合用戶生命周期的流程，AP很貼心的提供了一些參考的方案，可以點擊Guide Book來一鍵創建常見的用戶培育流程。這裡的詳細功能需要慢慢摸索，找到業務體系最適合的方式。

用暖石來舉例可能比較好理解，假設用戶著陸頁填寫了表單，註冊了賬戶，這時候數據進入到預設的Journeys中，可以在條件中設定根據用戶是否觀看過試聽課，對用戶看課程的行為給予一個相應的評分。比方說，一個用戶可能在找工作，所以會有意識地瀏覽「職業/面試」版塊的頁面，這樣當瀏覽了一定量的帖子之後，可以在網頁的右下角設定一些CTA（call to action）的提示，提示購買課程可以獲得老師對求職的指導/簡歷修改意見，點擊就跳到購買的頁面，從而比一開始就放個窗口在那轉化率要高得多，也可以讓網站的頁面更加有針對性。

又或者一個決策周期較長的業務，收集到的銷售線索需要由銷售人員跟進，但如果僅僅是通過表單來收集，則需要由銷售人員自行去判斷這個人是處於觀望狀態還是最終決策狀態？假設從數據分析了解到：新訪客則注重業務內容的介紹，舊訪客可能比較關心報價，用戶的轉化周期在一周內。那麼就可以設定條件，加入清單以後，如果一周內該用戶訪問了報價的頁面，那麼就可以把這個用戶判定為意向用戶，這時候銷售再去跟進，意向則會高於cold call的效果。

當然了，上述只是一個假想的流程，真正的用戶生命周期流程需要結合數據與行為流來綜合分析。在營銷的過程中，需要思考哪些東西可以交由系統去解決，達到營銷自動化，而哪一步則需要人工介入，讓用戶感受到屏幕的對面是一個人而不是一部冷冰冰的機器。只靠文字去表達可能無法完整描述AP是一個多棒的產品，如果可以的話不妨去試試，雖然是英文的界面但卻很好理解內容。

另外需要說明的是，AP的數據自動導入分兩種，一種是API導入，如果使用的是Instapage，那麼在最後提交表單的配置處就可以設置接入Autopilot；另一種則是表單數據的捕捉，在著陸頁配置了AP的監測代碼後，通過AP當中的配置可以捕捉到用戶提交的表單數據，從而同時發送一份副本到AP，不影響原有的數據提交，這種方式比較適合自建著陸頁的情況。相比之下，第一種提交方式比較萬無一失，但後續功能設置需要考慮比較多；而後者設置比較簡單，但如果網路不佳沒載入AP的代碼則有可能數據遺漏。因此在實際使用的情況下需要綜合考慮。

數據回收與調優

至此，上述工具的基本配置就完成了，限於篇幅的原因我無法事無巨細描述所有細節，當中其實還是有許多需要摸索的地方，如果遇到卡點不妨多看看官方提供的文檔。而接下來則是最重要的部分，數據回收和調優。

當完成了LP搭建，GTM的接入以及所有營銷代碼的部署，這時候再做最後一步的測試，確保所有代碼都順利載入，那麼就可以正式推向渠道測試了。如果渠道是Google廣告，那麼轉化頁面還需要加上轉化代碼，需要注意的是唯有Google廣告在GTM裡面直接填寫ID是無法生效的，目前的原因我還沒找到，所以還是要按照自定義代碼去填寫轉化代碼。

確定用戶需求這部分不細說，文案怎麼寫也不細說，暖石課程都有教。接入廣告跑了一段時間後，困擾的無非就兩個方面，第一是流量不夠，第二是轉化率不夠，畢竟轉化=流量x轉化率，轉化數上不去從這兩方面著手找問題。那麼流量的問題，包括但不限於文案圖片設計（文案不夠突出，圖片不夠吸引）或者渠道問題（本身該渠道流量就偏少）；轉化率問題則涉及到著陸頁的設計問題，文案問題等等。

這裡分享我的一些小心得，在動手做之前我會先思考：比方說在這個頁面里，用戶最關心的內容是否能在第一時間呈現給對方？大部分訪客的解析度是否能完整地看到我想要表達的內容？對於大部分用戶來說，第一眼能看到的畫面有多少？尤其針對網頁用戶而言，不同的顯示屏解析度是不一樣的，而且不同的瀏覽器也會影響不同的效果。所以問題就來了：用戶是用什麼設備在瀏覽著陸頁？

這個問題可以在GA的後台找到答案，由於公司的業務數據不便透露，因此借用暖石的實操數據示範，下圖是暖石實操的後台，可以看到PC端的瀏覽解析度如下。（注意圖中數據排除了移動端，由於移動端的需要考量的點是不一樣的，所以這裡先不討論，但並不代表移動端不重要）

好了，當知道主要的用戶設備解析度是1366x768以及1920x1080，這裡就需要藉助Chrome的移動開發者工具，可以用快捷鍵F12調出。其中有個自適應工具，填入1366x768，那麼就可以在這裡看到1366x768的解析度狀態下用戶所能觀察到的畫面。

由於現在前端的設備非常多，所以大部分公司做網頁都傾向於自適應的，也就是在不同解析度下，讓用戶來到著陸頁所能看到儘可能一致的內容設計，不過他們在第一屏的內容是不一樣的。

通過這個截圖可以看到，在這個解析度下，最下面一排內容是看不到的，而在1920x1080的情況下則可以完全顯示圖中紅框所示文案，這時候你可能會覺得，看不到也沒關係，用戶總會把滾輪往下滑的。但是如果使用了PTEngine之後，就會了解到，在訪客在每往下移動的時候都在流失，看完這個頁面的用戶可能最終不足10%，因此才需要讓儘可能多的用戶在第一屏的時候就被內容和設計吸引，也最好在第一屏就可以完成轉化。

當完成了首屏的長度調整以後，通過PTengine即可了解到用戶在瀏覽當前頁面時，點擊最多的位置是哪裡，從而對頁面的元素進行調整。如果著陸頁設置了超鏈接但用戶完全不點，則說明這個欄目該撤了。另外還可以切換到注意力視圖，了解用戶在哪部分的注意力最高，也有助於調整重點內容的順序，把用戶注意力更高的版塊往前挪，確保讓更多的用戶可以看到我們想要呈現的內容。（圖中是我自己測試的數據，可以看到有多少用戶看到頁面的哪一部分）

完成調整以後，還需要持續地調整和監測這次的調整是不是有起色，這時候千萬不要心急，初期或多或少會有些數據波動，例如Google廣告，會有一個機器學習的過程，需要持續投放一段時間讓系統適應新的著陸頁，所以要讓數據跑一段時間，穩定以後再跟之前的穩定狀態作對比，看看是否真的起效。

小結

事實上寫到這裡已經很長的篇幅，對於著陸頁如何設計還是有很多的東西值得討論，這裡只是拿了解析度作為一個分析的例子，除了優化頁面的載入速度，頁面的自適應這些技術層面的內容，還需要有產品的思維；結合市場需求和用戶需求，例如表單如何設計？是否能以選擇代替填空？多選如何優化為單選？選項多了用戶嫌麻煩不願意填，選項少了無法獲得足夠的信息，當中要如何取捨表單的設計？又或者可以提出這麼一個思考，這些信息是否有必要在用戶第一次接觸的時候就要求全部填寫？而LP的設計上，表單是否需要在首屏直接出現？還是用彈窗的形式來吸引用戶點擊後填寫？這個頁面是僅僅用於吸引新用戶還是新老用戶均會來到這個頁面？以上的問題都是在構思著陸頁的時候必須要思考的問題，也是調整著陸頁的方向。其實說白了，還是一切圍繞著目標用戶去做工作。

看完這篇文章，如果你覺得這篇文章對你有啟發或者有幫助，不妨給我點個贊吧，如果有其它建議，也歡迎在下方評論區提出~