在线预订是很多网站的运营模式，这其中主要包括旅游类网站、机票预订、酒店预订、医院预约等网站，当然铁道部的那个12306也算，这类网站的一个显著特性是：表单填写。表单是这类网站的最重要转化元素。本文将以新版的火车票预订网站（https://kyfw.12306.cn/otn/）为例讲述如何使用Google Tag Manager和Google Analytics（UA）对这类网站的表单进行跟踪和代码部署配置。

要进行表单跟踪，首先我们必须了解一些基本的jquery知识，主要是其中的元素取值相关函数，这里推荐去W3C这个网站学习jQuery 教程。

当然，如果你并不熟悉的话，也不要紧，下面的代码基本都是通用的，你可能只需要根据具体情况修改几个命名而已。如下图所示，我们先来体验下如何通过jquery取数据：

代码片段：

$(‘form’).find(‘input[id=fromStationText]‘).val();
$(‘form’).find(‘input[id=toStationText]‘).val();
$(‘form’).find(‘input[id=train_date]‘).val();
$(‘form’).find(‘input[id=back_train_date]‘).val();

其中，你只需要点击各个需要跟踪的区域，右键-审查元素，即可找到相应的元素ID，如果没有id，用class或者name也行，只要保持是惟一性即可。

当然，我们这里是需要把这些字段通过GTM的宏来存储并且最终赋值到事件跟踪里面的。事件跟踪器的命名方法可以这样：

事件类别：提交表单

事件操作：出发点-目的地

事件标签：出发日-返程日

事件价值：预订张数（这里不能买多张没法示例，如果有成人票+儿童票，可以中间用0隔开，比如成人票和儿童票各1张，最终目标价值为101，到时再分列开来即可，这样做的目的是因为GA的事件目标价值仅支持integer/整数）

下面，看下GTM中是如何操作的吧：

1、如下图所示建立一个宏，其他的表单跟踪内容类似方法，可通过复制然后修改其中的两个名字来快捷建立其他的。

2、建立表单跟踪的事件触发规则，一般情况下是设置为所有页面，当然也可以排除些确实没有表单填写的页面。

3、建立一个表单跟踪的监听规则，event=gtm.formSubmit，如下图所示：

4、添加一个事件跟踪的监听标签，设置延时，时间一般使用默认的即可，如下图所示：

5、再添加一个UA的事件跟踪（以新建TAG的形式添加），按照本文开头的命名方式填入参数的对应值，需要注意的是你需要替换其中的动态参数为上面设置的对应的宏，触发规则选择上面设置的Form Submission Listener这个规则。

通过以上的五个步骤，你就可以发布然后到热门事件中查看数据了，测试方法主要有3个：一个是看实时事件跟踪报告，另外一个是开启debug模式，再一个是在network中查看http://www.google-analytics.com/collect的Query String Parameters，去网站实际搜索下就可以看到结果了。

前几天在微博上发了一个用自定义维度跟踪天气情况的微博，大家好像比较感兴趣，这里再说下如何设置。其实，天气对于预订类网站影响还蛮大的，特别是外卖类网站或者旅游类网站。其实也简单，在GTM中新增一个宏、一个规则、修改一个标签，如下图所示：

记得去UA中添加Weather这个自定义维度，注意要对应索引号。

其中Weather API tag的代码如下（已经考虑到https的支持，如网站本身有jquery则可以去掉jquery库的引用）：

“”“”“&”“”“”“&&”“”“”””“”“”””

clientId几乎成为我使用UA和GTM的标配了~

function(){
var clientId = ga.getAll()[0].get(‘clientId’);
return clientId;
}

通过以上这些设置，那些表单跟踪就轻松搞定了。GA的站内搜索在这种网站大多数情况下其实是不太好用的，因为它们都基于某些考虑，让URL变得不那么规则和浅显易懂，很难去直接提取参数，而且站内搜索报告很难与其他维度指标进行交叉组合的。当然，如有你的自定义维度和指标有空的话，上面的事件跟踪改成自定义维度和指标也是未尝不可的。