利用 URL Rewrite 加入 Tracking Code

此篇介紹 URL Rewrite 的運用，利用 URL Rewrite 來附加追蹤程式碼，例如：GA 等。或是某些頁面添加一些特定 javascript code 。

操作環境

• IIS
  使用 IIS 10 來進行示範
  

• 追蹤碼
  追蹤碼使用 google analytics ，以下先附上追蹤碼的範例程式

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

設定方式

主題是使用 URL Rewrite 來附加，所以記得首要條件是安裝好 URL Rewrite 模組。
設定方式有兩種，一種是直接透過視窗操作介面設定，另一種是設定好 web.config 。
需要注意的是使用 URL Rewrite 來附加，需要關閉動態內容壓縮，因為壓縮後，就無法判斷內容去附加了。

介面設定

設定步驟其實在 Microsoft Docs 都有詳細介紹，這邊列出 IIS 的中文介面

• 開啟 IIS

• 選擇要設定的站台

• 選擇 URL Rewrite 模組
  

• 點選新增規則，接著選擇輸出規則內的空白規則
  

• 輸入規則名稱，接著設定先決條件
  

• 設定符合的條件，注意比對範圍是回應(Response)，另外這邊的模式可以不用使用 HTML Encode 編碼
  

• 設定動作屬性的值，就是要附加的追蹤碼
  

config 設定

由於要設定在 web.config 所以注意一下標籤，透過 HTML Encode (HTML 編碼轉換)後，再把值設定進去

<system.webServer>
  <rewrite>
    <outboundRules>
      <rule name="Add tracking script" patternSyntax="ExactMatch" preCondition="IsHTML">
        <match filterByTags="None" pattern="&lt;/head>" ignoreCase="true" />
        <action type="Rewrite" value="&lt;script async src=&quot;https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID&quot;>&lt;/script> &lt;script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'GA_TRACKING_ID'); &lt;/script>&lt;/head>" />
      </rule>
      <preConditions>
        <preCondition name="IsHTML">
          <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
        </preCondition>
      </preConditions>
    </outboundRules>
  </rewrite>
</system.webServer>

額外附上關閉動態內容壓縮

<system.webServer>
  <urlCompression doStaticCompression="true" doDynamicCompression="false" />
</system.webServer>

參考資料

• Microsoft Docs add tracking code