源起
想寫這篇文章，是因為最近在 GA 中發現了一些問題。
EmarSys 是公司新簽約的 EDM 服務商，在 GA 中已經可以看到最新一期 EDM 帶來的流量。但它的媒介參數似乎不正確，理論上應該設置為 email。
運營部的同學認為提供給 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 參數就會發揮作用。
好的，如果你只是提供一個最終鏈接給一個靠譜的 Agency，那麼直接提供上面的鏈接就可以了。但是如果是自己製作 EDM，情況會稍稍複雜一些。
HTML 實體
EDM 的本質實際上是一個 HTML 頁面（或一段 HTML 代碼），理論上它需要遵守 HTML 規範。
我們在上面提到的 & 字符在 HTML 代碼中是一個特殊字符，有特殊用途，它不能直接代表它自己。如果要在 HTML 頁面中表達這個字符時，你需要在源代碼中把它寫成 &。這種寫法叫做“HTML 實體”，其它一些字符也需要以實體的形式來寫入 HTML 代碼中（比如大於號 > → >、人民幣符號 ¥ → ¥ 等等）。
所以，如果要把鏈接加到 EDM 中的某個元素身上，在 HTML 源碼中就需要這樣寫（摘自 EDM 源文件）：
當然，用戶並不會接觸到源代碼。用戶通常是使用郵件客戶端（比如 FoxMail、Outlook 等）或瀏覽器來查看郵件，這些程序都是遵循 HTML 規範來開發的，它們可以正確地解析實體，將其轉換為本來的字符。
所以，雖然我們在源代碼中看到鏈接使用的是 & 實體，但郵件在顯示的時候，這些實體會被解讀為 & 字符。也就是說，用戶在查看郵件的時候，會得到一個正確的鏈接。如下圖（EDM 源文件在瀏覽器中的效果）：
好，文章正文到此已經結束。不過文章開頭的問題還沒有解決，所以我們繼續。
繼續分析問題
到目前為止，事情看起來都還不錯，對吧？
可是，我們並不是直接發送 HTML 文件，而是通過 EDM 投放系統（比如目前剛剛開始使用的 EmarSys）來完成郵件的發送。一封 EDM 從我們做好的 HTML 頁面到發送到用戶的郵箱中，經歷了一些處理。其中一個相當重要的處理步驟，是把頁面中原有的鏈接（通常已經加上了 UTM 參數）“包裝”起來。也就是說，並不會把原鏈接直接提供給用戶，而是把原鏈接替換成一個“中轉鏈接”（格式大約是 http://link2.foobar.com/u/nrd.php?p=XXX）。
我們觀察一下收到的 EDM 郵件，可以發現這一點：
這個中轉鏈接會把用戶帶到真正的目標頁面。（為什麼 EmarSys 要使用這種中轉鏈接？其實幾乎所有成熟的 EDM 服務商都會這樣做，這樣做有一些好處，不過這裡也不贅述了。）
發現問題
鋪墊了這麼久，終於要發現真相了——問題就出在 EmarSys 的系統和這個中轉鏈接。
這個系統並不能正確識別 HTML 頁面中的實體，在生成中轉鏈接的過程中，並不能把原鏈接中的 &實體解析為它的本意 & 字符，而是直接理解為實體的字面。這樣一來，用戶會被中轉鏈接帶到一個錯誤的、不是我們本意的地址。
下圖是我對中轉鏈接的跟蹤，它通過 HTTP 重定向（302）實現跳轉，跳轉目標由 Location 字段指定：
發現問題了吧？如果點擊 EDM 中的鏈接，用戶真正到達的地址是這樣的：
不要小看這幾個字符的差異，這個 URL 的實際效果已經不是我們最初期望的那樣了。如果你分析一下，會發現這個頁面（除了 utm_source 參數以外）真正接收到的是 amp;utm_media 這樣的參數，而不是原本的 utm_media 等等。參數傳錯了，GA 當然也就收不到正確的值，所以實際上不僅媒介參數有問題，活動、內容、關鍵字參數都沒有收到：
解決方案
目前我們所能做的：
- 向 EmarSys 反饋此問題，要求修復此缺陷。
- 在此問題修復之前，我們在 HTML 代碼的鏈接中，不使用實體，直接使用 & 字符。（需要注意的是，這樣編寫的 HTML 代碼是不規範的，我們這樣做僅僅是為了繞過 EmarSys 系統的缺陷。）
希望本文能幫助到您！
點贊+轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）
關注 ｛我｝，享受文章首發體驗！
每週重點攻克一個前端技術難點。更多精彩前端內容私信 我 回覆“教程”
原文鏈接：https://mp.toutiao.com/profile_v3/graphic/publish
