Introduce timeout for scripts such as Zendesk, Hubspot and defer GTM

mitodl · Jan 26, 2021 · 60b77d3 · 60b77d3
1 parent 46f2948
commit 60b77d3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/mitxpro/templates/base.html b/mitxpro/templates/base.html
@@ -35,9 +35,6 @@
     {% block extrahead %}
     {% endblock %}
     {% endspaceless %}
-      {% if zendesk_config.help_widget_enabled and not request.path|startswith:'/certificate/' %}
-          <script defer id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key={{zendesk_config.help_widget_key}}"> </script>
-      {% endif %}
   </head>
   <body class="{% block bodyclass %}{% endblock %}">
   <div class="main-panel">
@@ -64,18 +61,28 @@
     {% block scripts %}
     {% endblock %}
     {% if zendesk_config.help_widget_enabled and not request.path|startswith:'/certificate/' %}
-    <script type="text/javascript">
-      document.addEventListener('DOMContentLoaded', function() {
+    <script defer type="text/javascript">
+      function loadZendesk(){
+        var script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.id = 'ze-snippet';
+        script.async = true;
+        script.src = "https://static.zdassets.com/ekr/snippet.js?key={{zendesk_config.help_widget_key}}";
+        document.getElementsByTagName("body")[0].appendChild(script);
         if (typeof zE !== 'undefined') {
-          zE('webWidget', 'prefill', {
-            name: {
-                value: '{{user.name}}',
-            },
-            email: {
-                value: '{{user.email}}',
-            }
-          });
+            zE('webWidget', 'prefill', {
+                name: {
+                    value: '{{user.name}}',
+                },
+                email: {
+                    value: '{{user.email}}',
+                }
+            });
         }
+      }
+
+      document.addEventListener('DOMContentLoaded', function() {
+          setTimeout("loadZendesk();", 3000)
       });
     </script>
     {% endif %}

diff --git a/mitxpro/templates/footer.html b/mitxpro/templates/footer.html
@@ -40,26 +40,25 @@ <h2>Contact Us</h2>
         <ul class="footer-nav">
           <li><a href="/about-us/">About Us</a></li>
         </ul>
-        <script
-          defer
-          charset="utf-8"
-          type="text/javascript"
-          src="//js.hsforms.net/forms/v2-legacy.js"
-        ></script>
-        <script
-          defer
-          charset="utf-8"
-          type="text/javascript"
-          src="//js.hsforms.net/forms/v2.js"
-        ></script>
         <script>
-          document.addEventListener('DOMContentLoaded', function() {
+          function loadHubspot(){
+            var v2_lagacy_script = document.createElement('script');
+            v2_lagacy_script.type = "text/javascript"
+            v2_lagacy_script.src = "//js.hsforms.net/forms/v2-legacy.js"
+
+            var v2_script = document.createElement('script');
+            v2_script.type = "text/javascript"
+            v2_script.src = "//js.hsforms.net/forms/v2.js"
+
             if (typeof hbspt !== "undefined") {
               hbspt.forms.create({
                 portalId: "{{ hubspot_portal_id }}",
                 formId: "{{ hubspot_footer_form_guid }}",
               });
             }
+          }
+          document.addEventListener('DOMContentLoaded', function() {
+                setTimeout("loadHubspot();", 3000)
           });
         </script>
       </div>

diff --git a/mitxpro/templates/partials/gtm_head.html b/mitxpro/templates/partials/gtm_head.html
@@ -1,5 +1,5 @@
 {% if APIKEYS.GTM_TRACKING_ID %}
-  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  <script defer>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
   j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);