サードパーティJavaScriptから生成されたフォームは、どこに表示されないのですか？

Question

サードパーティ製のJavaScriptを使用してHubspotからフォームを挿入するWordPressサイトがあります。サイトはAutoptimizeプラグインを使用しています。

私のフッターには、拡張メニュー内にフォームが含まれている必要がありますが、何らかの理由で本文に生成が継続しています。私はこれは、asyncとサードパーティスクリプトタグを追加するときにのみ発生することを言及する必要があります。

私はスニペットに2種類の解決策を書いています。他のすべての依存関係は最後にロードされます。

このフォームを私のフッターにロードして、どこに置くことができますか？

Screen shot here.

<footer> 
 
    <div class="container-fluid"> 
 

 
     <div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 subscribe text-center"> 
 
     <div class="content tframe fw fh"> 
 
      <div class="tcell valign-mid"> 
 
      <div class="collapsible-data"> 
 
       <a href="#" class="collapsible-opener"> 
 
       Subscribe <span class="more">for Updates</span> <i class="fa fa-angle-up" aria-hidden="true"></i> 
 
       </a> 
 
       <div class="collapsible-content"> 
 
       <div class="row" eq-height=""> 
 
        <div class="col-lg-12 pull-left" eq-col=""> 
 
        <div class="info"> 
 
         <h3>Subscribe Today!</h3> 
 

 
        <!-- Start Solution 1: Prevents render blocking, but breaks layout --> 
 
         <script> 
 
         setTimeout(function(){ 
 
          $.ajax({ 
 
          url: '//js.hsforms.net/forms/v2.js', 
 
          dataType: 'script', 
 
          cache: true, 
 
          success: function() { 
 
           console.log("AJAX success!") 
 
           hbspt.forms.create({ 
 
           portalId: '2564694', 
 
           formId: '2a257043-30bc-4888-a09e-745501e0012a' 
 
           }) 
 
          } 
 
          }) 
 
         },2800); 
 
         </script> 
 
        <!-- End Solution 1 --> 
 

 
         <!-- Start Solution 2: Works, but becomes render blocking --> 
 
         <!--<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> 
 
         <script> 
 
         hbspt.forms.create({ 
 
         portalId: '2564694', 
 
         formId: '2a257043-30bc-4888-a09e-745501e0012a' 
 
         }); 
 
         </script>--> 
 
        <!-- End Solution 2 --> 
 

 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 social text-center"> 
 
     <div class="content tframe fw fh"> 
 
      <div class="tcell valign-mid"> 
 
      <div class="container-fluid"> 
 
       <div class="addthis_toolbox social"> 
 
       <a href="#" class="addthis_button_facebook" title="Facebook"> 
 
        <i class="fa fa-facebook" aria-hidden="true"></i> 
 
       </a> 
 
       <!--<a href="#" class="addthis_button_twitter" title="Twitter"> 
 
        <i class="fa fa-twitter" aria-hidden="true"></i> 
 
       </a>--> 
 
       <a href="#" class="addthis_button_email" title="Contact Us"> 
 
        <i class="fa fa-envelope" aria-hidden="true"></i> 
 
       </a> 
 
       <a href="#" class="addthis_button_linkedin" title="LinkedIn"> 
 
        <i class="fa fa-linkedin" aria-hidden="true"></i> 
 
       </a> 
 
       <a href="#" class="addthis_button_more" title="Share"> 
 
        <i class="fa fa-share-alt" aria-hidden="true"></i> 
 
       </a> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 signup"> 
 
     <div class="content tframe fw fh"> 
 
      <div class="tcell valign-mid"> 
 
      <?php echo g2is_home_webinar_latest() ?> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</footer> 
 
</div> 
 

 
<!-- Pagespeed compliant - Avoid render blocking load of JS --> 
 
<!--<script type="text/javascript"> 
 
    function loadJS(e) { var t = document.createElement("script"); t.type = "text/javascript", t.async = !0, t.src = e; var n = document.getElementsByTagName("head")[0]; n.appendChild(t) }; 
 
    loadJS('<?php echo get_template_directory_uri(); ?>/_assets/js/all.min.js'); 
 
</script>--> 
 

 
<!--Pagespeed compliant - Alternate non-render blocking JS --> 
 
<script async type="text/javascript"> 
 
    function downloadJSAtOnload() { 
 
    var element = document.createElement("script"); 
 
    element.src = "<?php echo get_template_directory_uri(); ?>/_assets/js/all.min.js"; 
 
    document.body.appendChild(element); 
 
    } 
 
    if (window.addEventListener) 
 
    window.addEventListener("load", downloadJSAtOnload, false); 
 
    else if (window.attachEvent) 
 
    window.attachEvent("onload", downloadJSAtOnload); 
 
    else window.onload = downloadJSAtOnload; 
 
</script> 
 

 
<?php wp_footer(); ?> 
 

 
<!-- Social Share Links --> 
 
<script type="text/javascript" async="" defer="" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-588971d14a074f13"></script> 
 

 
<!-- Start of HubSpot Embed Code --> 
 
<script type="text/javascript" async="" defer="" id="hs-script-loader" src="//js.hs-scripts.com/2564694.js"></script> 
 
<!-- End of HubSpot Embed Code --> 
 

 
</body> 
 
</html>

Answer 1

noptimizeタグ、CFR内のコードをラップします。 AO's FAQ？