挂钩 Javascript 加载特定的 JS 文件

Question

经过大量故障排除后，我发现我的 ga() 命令失败了，因为它们在 Google Analytics 加载到我的 Shopify 商店之前运行。我发现了一个示例代码片段，据说它会延迟命令直到 GA 加载，但它使用的是 JQuery 而我的网站没有使用。

<script>
  $(window).ready(function() {
    $('head script[async][src*="analytics"]').on('load', function() {
      ga('set', 'dimension1', 'insert_value');
      ga('set', 'dimension2', 'insert_value');
      ga('set', 'dimension3', 'insert_value');
    });
  });
</script>

我正在研究如何将其转换为纯 Javascript，我想我可以使用 addEventListener() 来等待它加载而不是加载。应该使用哪些函数来挂载另一个 Javascript 文件？

Answer 1

您的方向是正确的，我猜您的事件似乎没有被触发，因为您的加载顺序存在一些问题（即事件在您注册处理程序之前被触发）。以下内容应涵盖该情况。唯一的要求是在触发 DOMContentLoaded 之前插入脚本标签本身。

document.addEventListener("DOMContentLoaded", function() {
  const loaded = function() {
    console.log("Script loaded");
  }
  if (ga !== undefined) {
   loaded()
  } else {
   document.querySelector('script[async][src*="analytics"]').addEventListener("load", loaded);
  }
});

<script src="https://www.google-analytics.com/analytics.js" async="true"></script>

挂钩 Javascript 加载特定的 JS 文件

Hooking Javascript Onload for a specific JS file

javascript

asynchronous

google-analytics

onload

shopify