背景:
我们有几个项目，分析团队通过添加 JS (或者更确切地说 jQuery)将 )GTM 自定义 HTML 标记中的片段。例如:
mixpanel.track() 调用连接到元素上的点击
$(".btn.business").click(function() {
mixpanel.track("Segmentation - Business");
});
可能不是最明显的方法，但这使他们能够独立管理跟踪，而不需要更改应用程序的 JS 或标记。
问题:
在一个新项目中，我们想使用 RequireJS 进行模块加载，它工作得很好，只是分析的代码片段往往在 jQuery 加载之前执行，这当然会导致类似的错误
ReferenceError: $ is not defined
问题:
如果我们决定保留整个通过 gtm 注入(inject) JS 的方法，如何重写代码片段以便它们“等待”jQuery 加载？或者，GTM 中是否存在任何其他“全局”干扰点可以解决该问题？我不认为分析适合普通 JS。
其他信息:
整体页面布局:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<script type="text/javascript">
//NewRelic script - just to be honest
</script>
<title><!-- TITLE --></title>
<!-- A bunch of links: favicon, css, fonts -->
<script type="text/javascript">
//MixPanel script, generic
</script>
</head>
<body>
<!--
All page markup
goes
here
-->
<script src="/member/res/common/scripts/libs/require.min.js?v=601722621"></script>
<script src="/member/content/js/config.js?v=601722621"></script>
<script>
require.config({
urlArgs: 'v=601722621'
});
</script>
<script>
require(['Shared/Header', 'Report/report', 'Shared/sharingModal']);
</script>
<script>
var dataLayer = [
//the default dataLayer fillings
];
</script>
<noscript>
<!-- GTM iframe -->
</noscript>
<script>
//GTM script, generic
</script>
</body>
</html>
(部分)config.js:
require.config({
baseUrl: '/member/Content/js/',
// wait befor give up load js module (by default 7s)
waitSeconds: 30,
paths: {
// jQuery and validation, other vendors
jquery: ['https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min', './../../res/Common/Scripts/libs/jquery-2.1.4.min'],
jqueryValidate: ['https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min', './../../res/Common/Scripts/libs/jquery.validate.min'],
//etc...
clipboard: './../../res/TM/Scripts/modules/clipboard.min', // copy text to clipboard
}
});
// Load global js
require(['app', 'jquery', 'spinner'], function(app) {
app.init();
});
最佳答案
您应该能够在大部分情况下保持按原样编写代码，而依靠触发器类型。
为您的代码配置一个使用非默认触发器类型之一的触发器:
- 页面浏览量(默认)
- DOM Ready(可能满足您的需求)
- 窗口已加载(默认 GTM 中可能发生最后一个事件 - 在大多数情况下此时所有内容均已加载)。
关于javascript - 使用 RequireJS 通过 GTM 自定义 HTML 标签注入(inject) jQuery 片段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38023769/