谷歌標簽管理器腳本注入

Question

我最近的任務是清理我們的 GTM 標簽。 我注意到很多標簽都通過使用 JS 將它們注入到 DOM 中來包含遠程腳本，例如：

var head = document.getElementsByTagName('head')[0]
var js = document.createElement('script');
js.src = 'https://cdn.somewhere.com/script.js';
head.appendChild(js);

人們這樣做而不是僅僅使用它，是否有特定的原因？

<script type="text/javascript" src="https://cdn.somewhere.com/script.js" async></script>

第一種方法有什么好處？ 有沒有更好的方法來處理外部腳本？

Answer 1

我發現只有一個理由這樣做，但不確定現在是否仍然如此。 如本文所述，GTM 去除了一些腳本屬性，如果需要它們，最好以編程方式添加腳本。

Answer 2

使用 GTM，沒有任何意義。 append 腳本元素背后的想法是影響加載順序，但由於您首先需要加載 GTM，然后在運行之前將創建元素/附加代碼注入到任意 position 中，使用 GTM，這種其他明智的方法只會創建一個不必要的額外步驟。

在任何情況下都沒有實際意義，因為現在您既不會在自定義 HTML 標記中使用創建/附加，也不會使用腳本標記。 go 現在的方法是創建一個自定義模板並使用injectScript API。

Answer 3

使用第二個代碼，您將其寫入文檔中的非特定 position （或由 GTM 定義），而不是使用 appendChild 將元素附加到指定元素（在本例中head ）。

Answer 4

這種方法的另一個用例是當某人無法訪問源代碼但他們想運行腳本時。 這是一種黑客行為，因為網站所有者可能甚至不知道腳本在那里。 也可能是合法使用，即站點管理員沒有獲得源代碼許可的第三方托管網站。

Answer 5

您這樣做的原因是為了加快網站加載速度。

通過在頁面加載后加載腳本，您可以顯着提高 PageSpeed Insights 分數。

以下是開發人員在頁面加載后使用 Google 跟蹤代碼管理器加載 livechatinc.js（一個出了名的慢腳本）的示例：

網頁完全加載后加載 livechatinc 代碼

不幸的是，與 Universal Analytics 相比，使用 Google 跟蹤代碼管理器會使您的頁面加載速度增加約 300 毫秒。 但一般來說，這 300 毫秒遠小於 Live Chat Inc 之類的腳本，后者可以增加 1-2 秒。