火燒的Gmail
No Result
View All Result
  • 全部文章
  • 數位行銷
    • PTT/Dcard
    • 線上工具
    • 工作術
    • Webflow
    • WordPress
    • Google AD
    • Google Search Console
    • SEO
  • 廣告分析
    • 品牌故事
    • 娛樂新聞
  • 純文學
  • 日記
  • 手錶
  • 大人
  • 抖內支持
火燒的Gmail
  • 全部文章
  • 數位行銷
    • PTT/Dcard
    • 線上工具
    • 工作術
    • Webflow
    • WordPress
    • Google AD
    • Google Search Console
    • SEO
  • 廣告分析
    • 品牌故事
    • 娛樂新聞
  • 純文學
  • 日記
  • 手錶
  • 大人
  • 抖內支持
No Result
View All Result
No Result
View All Result

如何在Webflow上安裝GTM?Google Tag Manager 完整安裝教學

2020/03/21
in Webflow, 網站技術
0
SHARES
426
VIEWS

在安裝之前需要特別注意,兩個 Webflow 官方教學中並沒有特別強調的地雷,1. 只有付費帳號才能在 Webflow 上安裝 GTM (Google Tag Manager),2. 安裝時必須手動一頁一頁加!在目標頁面的Navigator中,手動嵌入Html程式碼。

關於Webflow的完整介紹、優缺點分析,可以參見我這篇完整文章。我也會在部落格中,陸續和大家分享繁體中文圈最齊全的Webflow教學。假如你想安裝GTM,可以參見以下的教學。

文章結構

  • GTM 安裝教學
    • 第一步:到 Google Tag Manager 進行註冊
    • 第二步:安裝Google代碼管理工具(head)
    • 第三步:安裝Google代碼管理工具(body)
    • 第四步:把GTM Symbol化,做成一個固定的盒子

GTM 安裝教學

第一步:到 Google Tag Manager 進行註冊

儘量使用原 GA 帳號進行註冊!否則後續的資料共用設定非常麻煩。從這一頁填寫資料,開始註冊

第二步:安裝Google代碼管理工具(head)

點選想安裝的目標網站,最右邊的齒輪

複製head中的內容,貼至Webflow中

只要貼進<head>區域中即可,不用煩惱要貼在其他工具程式碼的上面或下面,只要貼在這個區域內就算成功了!貼上後記得按下右上角的發佈Publish(按下Save Changes後再點Publish也可以;不儲存、直接點Publish也沒關係)

第三步:安裝Google代碼管理工具(body)

在Custom Code頁面中的head底下,有個Footer Code區域,千萬不要把body程式碼貼在這裡!

市面上多數工具都是傾向將程式碼放在body的最上端,然而這個區域卻是將程式碼放在body區塊的最下面(即Footer上方),並不利於任何工具的追蹤。除非有的工具是希望將程式碼貼在Footer處,若是該情況,再把程式碼貼在這個區域即可。

正確作法應為,從GTM後台複製了程式碼之後,進入單一Webflow頁面,運用「HTML Embed element」這個元素,個別手動新增進Webflow中。

非付費帳號無法使用此功能,因此左上角標註了星號。

貼上後,記得到Navigator中,把該element挪至最上方,這樣就大功告成了!

第四步:把GTM Symbol化,做成一個固定的盒子

然而,多數人使用Webflow架站,都不只建立一個頁面,意即多數網站並非一頁式網站(單頁式網站,One-page-Web),因此需要頻繁地在每一頁上新增Google Tag Manager,假如每次都要Embed Code碼,會非常麻煩,所以推薦大家可以透過Symbol功能(綠色小盒子)來節省時間。

把 HTML Embed element 鎖定成一個固定的Symbol,並且手動埋入每個目標頁面中,這樣就大功告成了!結論就是,在這段埋GTM的過程中,Webflow比起WordPress來說難用得多。

Previous Post

經典與流行

Next Post

蛋架

Related Posts

網站技術

Caps lock 常常按了沒反應?調整 Macbook 按鍵靈敏度,快速切換輸入法

2020/12/31
141
PTT/Dcard

Zuvio 校園新興大學生社群網站介紹,Dcard、PTT 的競爭者來了

2020/10/24
902
PTT/Dcard

Alexa 無法監測 PTT 用戶活躍程度,PTT 網頁版瀏覽者多為站外人士

2020/10/23
195
PTT/Dcard

Dcard 各看板的活躍大學排行榜!哪所大學的學生最愛逛西斯板?

2020/10/16
1.7k
網站技術

YouTube 直播分析工具,收視率、抖內金額及主播收入一覽

2020/09/23
3.5k
Twitter

如何用手機下載 Twitter 影片?用手機瀏覽器下載推特高畫質 HD 影片

2020/09/19
837
  • 數位行銷
    • Webflow
    • WordPress
    • 線上工具
    • PTT/Dcard
    • Twitter
    • Google AD
    • Google Search Console
    • SEO
  • 廣告分析
    • 飲食
    • 外在
    • 科技
      • 硬體
      • 軟體
    • 交通
    • 日用品
  • 品牌故事

隨選文章・局妹吐信😛

Google sites 不支援 Google Adsense,Google 協作平台不開放使用Google 廣告欄位

2020/02/20
666

為什麼潛水錶(Diver Watch)側面會有個洞?飽和潛水專用的自動排氦閥

2020/09/06
390

台灣YouTuber經紀公司禁止旗下藝人對香港反送中事件發聲

2019/06/12
13.3k

YAMAHA CUXi(一)

2018/08/11
573

每朝健康綠茶

2018/07/28
551

如何在特定網頁中移除廣告欄位?—Google AdSense廣告設定教學

2019/11/17
381

吉百利巧克力:香港1986 電視篇

2018/10/30
116

植村秀開設台灣官方IG|shu uemura

2019/04/17
694
  • 如何用 Twitter 搜尋18禁成人內容?推特搜尋功能教學

    0 shares
    Share 0 Tweet 0
  • SWAG.live 是什麼網站?商業模式及競品分析,AV素人寫真、付費色情影音市場簡介

    0 shares
    Share 0 Tweet 0
  • 偷看限動神器Saveig.org,偷窺別人IG不留痕跡,渣男壞閨蜜剋星

    0 shares
    Share 0 Tweet 0
  • 健身網紅咻咻Ashlee與男友Tao分手

    0 shares
    Share 0 Tweet 0
  • SWAG 廠商模式A片看到飽,Logo 按七下長片免費看(官方已取消)

    0 shares
    Share 0 Tweet 0
  • PTT帳號肉搜教學,用專業搜尋工具人肉搜索鄉民的真面目

    0 shares
    Share 0 Tweet 0
  • Dcard 查詢被刪掉的文章和照片,用深卡和 PTT Brain 搜尋原文備份

    0 shares
    Share 0 Tweet 0
  • 關於我
  • 抖內支持
  • LinkedIn 履歷
  • 數位行銷
  • PTT/Dcard
  • 線上工具
  • 工作術
  • Webflow
  • WordPress
  • Google AD
  • Google Search Console
  • SEO
  • 廣告分析
  • 品牌故事
  • 飲食
  • 外在
  • 科技
  • 交通
  • 創意
  • 日記
  • 路人趣味
  • 迷幻文學
  • 普通文學

有事燒紙:[email protected]

版權是我的,不要幹走

No Result
View All Result
  • 全部文章
  • 數位行銷
    • PTT/Dcard
    • 線上工具
    • 工作術
    • Webflow
    • WordPress
    • Google AD
    • Google Search Console
    • SEO
  • 廣告分析
    • 品牌故事
    • 娛樂新聞
  • 純文學
  • 日記
  • 手錶
  • 大人
  • 抖內支持

版權是我的,不要幹走