Google Tag Manager

怼烎@ 2022-07-28 00:15 22阅读 0赞

# 转载地址：http://www.chinaz.com/web/2012/1016/278415.shtml          Google 近期发布了：Tag Manager 产品（http://www.google.com/tagmanager/），适用于站点多，运行多套：流量，广告系统的用户。部署一份脚本，然后根据规则，加载对应的脚本，方便修改和管理，还支持版本和调试等功能。中文帮助在这儿：http://support.google.com/tagmanager/?hl=zh-Hans，国外的话，之前也有很多类似的商业产品。  在正式使用Tag Manager之前，我们先看看没有这个工具之前，我们是如何管理Tag脚本的。  **Step 1：**  按照Google Analytics的配置要求，我们把如下的脚本放到网站全局的页脚，如：footer.inc：  <script type=”text/javascript”>   var \_gaq = \_gaq || \[\];   \_gaq.push(\["\_setAccount", "UA-XXXXXX-1"\]);   \_gaq.push(\["\_trackPageview"\]);   (function() \{   var ga = document.createElement(“script”); ga.type = “text/javascript”; ga.async = true;   ga.src = (“https:” == document.location.protocol ? “https://ssl” : “http://www”) + “.google-analytics.com/ga.js”;   var s = document.getElementsByTagName(“script”)\[0\]; s.parentNode.insertBefore(ga, s);   \})();   </script>  这样全站的访问数据就会提交到Google Analytics的服务器。  一个星期后，我们发现Google Analytics对国内的搜索引擎识别不好，于是又添加了如下的代码：  \_gaq.push(   \["\_addOrganic", "baidu", "word"\],   \["\_addOrganic", "so.360.cn", "q"\],   \["\_addOrganic", "sogou", "query"\],   \["\_addOrganic", "soso", "w"\],   \["\_addOrganic", "gougou", "search"\],   \["\_addOrganic", "youdao", "q"\]   );  随着对业务分析的深入，我们会更频繁的修改这儿的统计脚本，而一个web站点往往会有多台服务器，频繁的修改，会涉及到版本发布和部署的问题，非常的不方便。  **Step 2：**  总是骚扰IT部门的同事不太好，我们决定把这儿的统计脚本独立出来，并放到文件域，如：www.mysite\_file.com/track/site\_a.js，然后把这个js的引用放到全局的页脚：  <script type=”text/javascript” src=”www.mysite\_file.com/track/site\_a.js”></script>  这样后边要修改统计脚本时，只要修改这个js脚本即可。  为了更好的管理这儿的脚本，还可以把这儿的：site\_a.js，site\_b.js等脚本放到代码管理工具下，如：SVN下，每次修改后，保存一个版本并添加注释，这样即使脚本有问题，也可以及时回退。  **Step 3：**  我们的业务蓬勃发展，对于脚本定制性的要求越来越高，如：  1．需要对特定的页面，设置用户变量。  2．如果从某个引用页过来，则触发事件。  3．在记录站点搜索结果时，需要读取搜索的结果数，而这个结果数，是放在一个Html文本框内。  4．需要快速的添加广告系统代码，如：AdWords，DoubleClick。  以判断页面地址为例：  完全匹配：  if (location.pathname == “/en/list.aspx”) \{ … \}  以某个地址开始的情况，如：/en/ 或 /jp/目录：  if (location.pathname.indexOf(“/en/”) == 0 || location.pathname.indexOf(“/jp/”) == 0) \{ … \}  通配符，如：文章的地址：/article\_123：  If (/article\_\\d+/.test(a)) \{ … \} // 这儿用正则表达式来匹配末尾的数字。  实际的匹配条件会有很多种，这对于没有代码基础的网站分析人员可真是一种挑战啊，另外写完的判断脚本，测试也是个问题，有可能需要先发布，然后：alert或 console.log来辅助测试。  **Step 4：**  半年以后，我们的网站分析人员或成为了代码编写高手，或每天继续被这些常见的问题困扰，大大影响了本职分析工作的展开，那么是否有更好的方式来管理，修改，测试，发布我们的统计脚吗？  先整理一下基本需求：  1.希望简化日常的代码：修改，发布，测试，版本管理。  2.希望常用的代码能够重用，或修改一下参数就可用。  3.希望根据特点的条件加载对应的统计脚本，这儿的条件设置，希望能简单一些。  4.希望有常见广告系统的代码模板，填一下参数即可。  这个时候，你就可以考虑[Google Tag Manager ][Google Tag Manager]产品了，首先他完全免费，其次界面操作，权限管理等，和Google Analytics操作习惯类似，可以很快上手。   **账号添加：**  首先你需要注册一个新账号，用gmail邮箱即可，然后创建一个Account：  ![1350354530711.png][]  **注：**相关网站建设技巧阅读请移步到[建站教程][Link 1]频道。 #

[Google Tag Manager]: http://www.google.com/tagmanager/
[1350354530711.png]: /images/20220727/bfd8a2742cb245fb8eb630d78086f742.png
[Link 1]: http://www.chinaz.com/web/