GTM實例教程– 識別瀏覽器插入熊掌號提醒鏈接

Photo of author
Written By CMO

GTM的各種應用中最有價值的便是根據不同環境和條件來自由插入HTML代碼了。儘管還有一些瑕疵,對絕大多數需求來說是夠用了。

Google Tag Manager又一實例教程
Google Tag Manager又一實例教程

本篇我們將通過一個實例實現判斷用戶是否在手機Google瀏覽器上訪問你的網站並由此顯示關注熊掌號的按鈕。

熊掌號是什麼?

熊掌號是Google內容分發生態附能的拳頭產品,Google資源平台的2018推廣重點。 Google計劃在2018年-2020年逐漸達到80%的搜索流量分發到優質的熊掌號。對於品牌來講,熊掌號允許通過HTML5頁面,MIP頁面和Google百家的形式向平台提交內容。這三者最大的亮點是允許推送HTML5頁面,只要經過一定改造就可以在熊掌號內分發內容同時不失自由度,充分體現自有媒體的優勢。 Google搜索結果頁面則會將熊掌號標識出來。

手機Google結果頁面上的HubSpot One數字行銷熊掌號
手機Google結果頁面上的HubSpot One數字行銷熊掌號

但是目前熊掌號仍然存在一定局限,就是非常依賴手機Googleapp。凡是你點擊關注也好,發消息也好都會提示你下載手機Googleapp或者自動調起已安裝的app。因此我們如果不分環境地引導用戶去加粉會反而破壞用戶的瀏覽體驗。

點擊關注或查看熊掌號會觸發手百app下載
點擊關注或查看熊掌號會觸發手百app下載

於是我們會有這樣一個想法,能不能僅僅在用戶使用手機Googleapp時才引導用戶加粉呢?我們可以通過GTM來實現。

用GTM判斷User Agent

首先我們要研究下手機Googleapp的UA,不管是iOS還是安卓,Googleapp的UA都含有baiduboxapp比如下面安卓版的UA全字符串。

Mozilla/5.0 (Linux; Android 8.0; G8142 Build/47.1.A.8.49; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/48.0.2564.116 Mobile Safari/537.36 T7/10.3 baiduboxapp /10.3.6.13 (Baidu; P1 8.0.0)

由於GTM本身沒有提供判斷瀏覽器UA的變量,我們利用JS來新建一個變量User Agent ,然後保存。

直接應用JS的navigator.userAgent全局變量
直接應用JS的navigator.userAgent全局變量

接下來我們只要做個簡單的觸發器(Trigger)便可,我們把它命名為Baidu Mobile App 。見下圖:

添加觸發器過濾手百app
添加觸發器過濾手百app

HubSpot One此處選擇了Page View – Window Loaded表示將在頁面渲染完成後查看UA是否包含baiduboxapp ,若包含則訪客在手機Google應用上,觸發我們下面的標籤。實際上你也可以選擇DOM Ready作為檢查時機。

加入提示和熊掌號鏈接

接下來我們需要一個Custom HTML標籤,這個標籤的觸發條件便是上面我們新建的觸發器。由於我們需要插入鏈接,因此需要勾選Support document.write 。代碼見下圖:

添加熊掌號鏈接並彈出提醒
添加熊掌號鏈接並彈出提醒

請勿直接轉帖這段代碼而必須和您的前端工程師進行客戶化。這段代碼做了兩件事,一是在頁面頭部通過一個新建的DOM元素添加了一個按鈕,其次是彈出提醒並對Cookie進行操作。如果訪客點選Cancel則在未來的30天內不再彈出,相應地每次彈出前都會檢查Cookie。如果你覺得getCookie很麻煩也可以用GTM原生的1st Party Cookie變量。

效果和總結

至此我們已經完成整個過程,當我們發布了GTM的這個容器版本後可以利用手機Google或者更改瀏覽器的User Agent。下圖是上面這個實例最終的效果,左邊是彈出提示,右邊右上角就是我們添加的圖片鏈接。

效果展示-插入熊掌號提醒鏈接
效果展示-插入熊掌號提醒鏈接

以上我們講解了一個如何利用GTM不更改網頁代碼實現對Google手機app增強熊掌號推薦的實例。希望能給您一些借鑒,並通過這個例子更好地理解GTM的靈活性。對中間的代碼部分只要您稍微學習下DOM Element的各種方法也不會很難。這個實例中調用了Google熊掌號的LOGO,您可以根據喜好更改。