Javascript 通过带有RequireJS的GTM自定义HTML标记注入jQuery片段背景：_Javascript_Jquery_Requirejs_Google Tag Manager_Mixpanel

Javascript 通过带有RequireJS的GTM自定义HTML标记注入jQuery片段背景：

javascript jquery requirejs

Javascript 通过带有RequireJS的GTM自定义HTML标记注入jQuery片段背景：,javascript,jquery,requirejs,google-tag-manager,mixpanel,Javascript,Jquery,Requirejs,Google Tag Manager,Mixpanel,我们有几个项目，在这些项目中，分析团队通过在GTM自定义HTML标记中添加JS（或者更确切地说是jQuery）片段来连接mixpanel.track（）调用以点击元素。例如：可能不是最明显的方式，但这允许他们独立管理跟踪，而不需要更改应用程序的JS或标记问题: 在一个新项目中，我们希望使用RequireJS进行模块加载，它工作得很好，只是分析片段往往在jQuery加载之前就被执行了，这当然会导致如下错误 ReferenceError:$未定义问题: 如果我们决定继续使用整个通过gtm注入

我们有几个项目，在这些项目中，分析团队通过在GTM自定义HTML标记中添加

JS

（或者更确切地说是

jQuery

）片段来连接

mixpanel.track（）

调用以点击元素。例如：

可能不是最明显的方式，但这允许他们独立管理跟踪，而不需要更改应用程序的JS或标记

问题: 在一个新项目中，我们希望使用RequireJS进行模块加载，它工作得很好，只是分析片段往往在jQuery加载之前就被执行了，这当然会导致如下错误

ReferenceError:$未定义

问题: 如果我们决定继续使用整个通过gtm注入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>

您应该能够让代码大部分保持原样，而不是依赖于触发器类型

为使用非默认触发器类型之一的标记配置触发器：

页面视图（默认）
DOM就绪（可能适合您的需要）
窗口已加载（默认GTM中可能出现的最后一个事件-在大多数情况下，此时加载所有内容）

<!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>

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();
});