Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UTM 参数、URL 和 HTML 实体的那点事 #12

Open
cssmagic opened this issue Jun 21, 2013 · 4 comments
Open

UTM 参数、URL 和 HTML 实体的那点事 #12

cssmagic opened this issue Jun 21, 2013 · 4 comments
Labels

Comments

@cssmagic
Copy link
Owner

cssmagic commented Jun 21, 2013

UTM 参数、URL 和 HTML 实体的那点事

这篇文章是写给运营同学的科普文。

源起

想写这篇文章,是因为最近在 GA 中发现了一些问题。

EmarSys 是公司新签约的 EDM 服务商,在 GA 中已经可以看到最新一期 EDM 带来的流量。但它的媒介参数似乎不正确,理论上应该设置为 email

图1

运营部的同学认为提供给 EDM 的链接不会有错,于是我深入分析之后便有了这篇文章。写完它,我以后应该就不需要口头再解答很多问题了。


UTM 参数

UTM 参数的作用这里暂不赘述。我们先看一个正常的、加了 UTM 参数的链接(URL),它通常是这样的:

http://www.foobar.com/?utm_source=google&utm_medium=cpc&utm_campaign=test&utm_term=test

简单小结一下参数规则:

  • UTM 参数可能有一个或多个。
  • 每个 UTM 参数由参数名和参数值组成,使用等号(=)连接。
  • 多个 UTM 参数之间使用 and 字符(&)连接。
  • 所有参数使用问号(?)附加到原始链接的尾部。
  • (其它略微高级一点的规则与主题无关,暂且略过。)

实际工作中,建议使用专门的链接生成工具来为链接添加 UTM 参数,避免手工失误。

当有人用浏览器访问这个 URL 时,UTM 参数就会发挥作用。

图2

好的,如果你只是提供一个最终链接给一个靠谱的 Agency,那么直接提供上面的链接就可以了。但是如果是自己制作 EDM,情况会稍稍复杂一些。

HTML 实体

EDM 的本质实际上是一个 HTML 页面(或一段 HTML 代码),理论上它需要遵守 HTML 规范。

我们在上面提到的 & 字符在 HTML 代码中是一个特殊字符,有特殊用途,它不能直接代表它自己。如果要在 HTML 页面中表达这个字符时,你需要在源代码中把它写成 &。这种写法叫做“HTML 实体”,其它一些字符也需要以实体的形式来写入 HTML 代码中(比如大于号 >>、人民币符号 ¥¥ 等等)。

所以,如果要把链接加到 EDM 中的某个元素身上,在 HTML 源码中就需要这样写(摘自 EDM 源文件):

图3

当然,用户并不会接触到源代码。用户通常是使用邮件客户端(比如 FoxMail、Outlook 等)或浏览器来查看邮件,这些程序都是遵循 HTML 规范来开发的,它们可以正确地解析实体,将其转换为本来的字符。

所以,虽然我们在源代码中看到链接使用的是 & 实体,但邮件在显示的时候,这些实体会被解读为 & 字符。也就是说,用户在查看邮件的时候,会得到一个正确的链接。如下图(EDM 源文件在浏览器中的效果):

图4


好,文章正文到此已经结束。不过文章开头的问题还没有解决,所以我们继续。

继续分析问题

到目前为止,事情看起来都还不错,对吧?

可是,我们并不是直接发送 HTML 文件,而是通过 EDM 投放系统(比如目前刚刚开始使用的 EmarSys)来完成邮件的发送。一封 EDM 从我们做好的 HTML 页面到发送到用户的邮箱中,经历了一些处理。其中一个相当重要的处理步骤,是把页面中原有的链接(通常已经加上了 UTM 参数)“包装”起来。也就是说,并不会把原链接直接提供给用户,而是把原链接替换成一个“中转链接”(格式大约是 http://link2.foobar.com/u/nrd.php?p=XXX)。

我们观察一下收到的 EDM 邮件,可以发现这一点:

图5

这个中转链接会把用户带到真正的目标页面。(为什么 EmarSys 要使用这种中转链接?其实几乎所有成熟的 EDM 服务商都会这样做,这样做有一些好处,不过这里也不赘述了。)

发现问题

铺垫了这么久,终于要发现真相了——问题就出在 EmarSys 的系统和这个中转链接。

这个系统并不能正确识别 HTML 页面中的实体,在生成中转链接的过程中,并不能把原链接中的 & 实体解析为它的本意 & 字符,而是直接理解为实体的字面。这样一来,用户会被中转链接带到一个错误的、不是我们本意的地址。

下图是我对中转链接的跟踪,它通过 HTTP 重定向(302)实现跳转,跳转目标由 Location 字段指定:

图6

发现问题了吧?如果点击 EDM 中的链接,用户真正到达的地址是这样的:

图7

不要小看这几个字符的差异,这个 URL 的实际效果已经不是我们最初期望的那样了。如果你分析一下,会发现这个页面(除了 utm_source 参数以外)真正接收到的是 amp;utm_media 这样的参数,而不是原本的 utm_media 等等。参数传错了,GA 当然也就收不到正确的值,所以实际上不仅媒介参数有问题,活动、内容、关键字参数都没有收到:

图8

图9

图10

解决方案

目前我们所能做的:

  1. 向 EmarSys 反馈此问题,要求修复此缺陷。
  2. 在此问题修复之前,我们在 HTML 代码的链接中,不使用实体,直接使用 & 字符。(需要注意的是,这样编写的 HTML 代码是不规范的,我们这样做仅仅是为了绕过 EmarSys 系统的缺陷。)

© Creative Commons BY-NC-ND 4.0   |   我要订阅   |   我要打赏

@cssmagic
Copy link
Owner Author

团队中有同学表示在 HTML 代码中可以用 %26 来代替 &,听起来似乎是合理的,是一个不错的思路。

但是我自己模拟 EmarSys 系统的行为做了一些测试,发现是不行的。%26 只有写在链接的 herf 属性中才会被浏览器解析为 &,用户在点击链接时会进入正确的地址;其它情况下(直接在浏览器地址栏打开、301/302 跳转到包含 %26 的 URL)都不会得到期望的结果。

测试代码如下(不好意思,只会写点 ASP 啊):

a.asp

<%
Response.Status = "302"
Response.AddHeader "Location", "b.asp?a=1%26b=2"
Response.End
%>

b.asp

<%
dim a, b
a = Request.QueryString("a")
b = Request.QueryString("b")
Response.write "a: " & a & ", " & "b: " & b
%>

实际输出 a: 1&b=2, b:,而不是期望的 a: 1, b: 2。大家应该可以看出其中的缘由。

@edokeh
Copy link

edokeh commented Jun 21, 2013

HTML 里面写 URL ,参数里的 & 要转义这件事以前还真没重视过,虽然 W3C 校验老报这个错

@cssmagic
Copy link
Owner Author

@edokeh 对,反正大多数时候浏览器都可以脑补。不过 旧 IE 下可能会踩到坑

@edokeh
Copy link

edokeh commented Jun 22, 2013

哦对!想起来踩过这个坑!后来参数再也不敢叫 reg 了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants