GTM实例教程 – 识别浏览器插入熊掌号提醒链接
GTM的各种应用中最有价值的便是根据不同环境和条件来自由插入HTML代码了。尽管还有一些瑕疵，对绝大多数需求来说是够用了。
本篇我们将通过一个实例实现判断用户是否在手机百度浏览器上访问你的网站并由此显示关注熊掌号的按钮。
熊掌号是什么？
熊掌号是百度内容分发生态附能的拳头产品，百度资源平台的2018推广重点。百度计划在2018年-2020年逐渐达到80%的搜索流量分发到优质的熊掌号。对于品牌来讲，熊掌号允许通过HTML5页面，MIP页面和百度百家的形式向平台提交内容。这三者最大的亮点是允许推送HTML5页面，只要经过一定改造就可以在熊掌号内分发内容同时不失自由度，充分体现自有媒体的优势。百度搜索结果页面则会将熊掌号标识出来。
但是目前熊掌号仍然存在一定局限，就是非常依赖手机百度app。凡是你点击关注也好，发消息也好都会提示你下载手机百度app或者自动调起已安装的app。因此我们如果不分环境地引导用户去加粉会反而破坏用户的浏览体验。
于是我们会有这样一个想法，能不能仅仅在用户使用手机百度app时才引导用户加粉呢？我们可以通过GTM来实现。
用GTM判断User Agent
首先我们要研究下手机百度app的UA，不管是iOS还是安卓，百度app的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，然后保存。
接下来我们只要做个简单的触发器（Trigger）便可，我们把它命名为Baidu Mobile App。见下图：
极诣此处选择了Page View – Window Loaded表示将在页面渲染完成后查看UA是否包含baiduboxapp，若包含则访客在手机百度应用上，触发我们下面的标签。实际上你也可以选择DOM Ready作为检查时机。
加入提示和熊掌号链接
接下来我们需要一个Custom HTML标签，这个标签的触发条件便是上面我们新建的触发器。由于我们需要插入链接，因此需要勾选Support document.write。代码见下图：
请勿直接转帖这段代码而必须和您的前端工程师进行客户化。这段代码做了两件事，一是在页面头部通过一个新建的DOM元素添加了一个按钮，其次是弹出提醒并对Cookie进行操作。如果访客点选Cancel则在未来的30天内不再弹出，相应地每次弹出前都会检查Cookie。如果你觉得getCookie很麻烦也可以用GTM原生的1st Party Cookie变量。
效果和总结
至此我们已经完成整个过程，当我们发布了GTM的这个容器版本后可以利用手机百度或者更改浏览器的User Agent。下图是上面这个实例最终的效果，左边是弹出提示，右边右上角就是我们添加的图片链接。
以上我们讲解了一个如何利用GTM不更改网页代码实现对百度手机app增强熊掌号推荐的实例。希望能给您一些借鉴，并通过这个例子更好地理解GTM的灵活性。对中间的代码部分只要您稍微学习下DOM Element的各种方法也不会很难。这个实例中调用了百度熊掌号的LOGO，您可以根据喜好更改。
