monacaでnend広告表示が表示されたりされなかったり、クリックできたり出来なかったりします。

monacaでnend広告表示が安定されません。
表示されたりされなかったり、クリックできたり出来なかったりします。
どういった原因かわからず、こういったことに出会った方がいたらアドバイスいただけますと幸いです。

index.htmlファイル

lang
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <script src="components/loader.js"></script>
7    <link rel="stylesheet" href="components/loader.css">
8    <link rel="stylesheet" href="css/style.css">
9    <script>
10      console.log("[[ start logging ]]");
11      var d1 = new Date();
12      console.log(d1);
13      ons.bootstrap();
14      var nend_params;
15      //iOS/Androidアプリそれぞれに共通のコードとする場合は下記のように処理を切り分けます。
16      if( monaca.isIOS ){
17        nend_params = {"media":XXXXX,"site":XXXXXX,"spot":XXXXX,"type":1,"oriented":2};
18        console.log("ad by iOS");
19      } 
20      if( monaca.isAndroid ){
21        nend_params = {"media":XXXXX,"site":XXXXXX,"spot":XXXXX,"type":1,"oriented":2};
22        console.log("ad by android");
23      }
24      ons.ready(function() {
25          var nendOriginalElem = angular.element(document.querySelector('#nend_wrapper'));
26          var nendInjectElem1 = angular.element(document.querySelector('#new_nend_wrapper'));
27          nendInjectElem1.replaceWith(nendOriginalElem.clone());
28          console.log("view ad")
29      });
30    </script>
31    <script src="js/ncmb.min.js"></script>
32    <script src="js/init.js"></script>
33    <script src="js/user.js"></script>
34    
35</head>
36<body>
37    <ons-navigator title="Navigator" var="bookNavi" page="home.html"></ons-navigator> 
38    <div id="nend_wrapper">
39        <script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script>    
40    </div>
41</body>
42</html>
43

表示部分の.htmlファイル

<ons-page id="common_page">
    <ons-tabbar>
        <ons-tab page="menu.html" icon="ion-ios-book-outline" active="true"></ons-tab>
        <ons-tab page="html/group/groupMenu.html" icon="ion-person"></ons-tab>
    </ons-tabbar>  
    <ons-bottom-toolbar>
        <div id="new_nend_wrapper"></div>
    </ons-bottom-toolbar>
</ons-page>

```

行動規範の内容に同意します

回答1件

ons.readyは、DOMContentLoaded と Cordovaのdevicereadyを待って実行されます。
nend広告は、DOMContentLoadedのタイミングでタグを展開します。

起動時にイベントが起きた順番がDOMContentLoaded→devicereadyだった場合、nend広告展開→ons.readyになるため、#nend_wrapperのcloneの時点で広告があるので、広告表示が正常になります。

起動時にイベントが起きた順番がdeviceready→DOMContentLoadedだった場合、どちらも同じDOMContentLoadedのタイミングでの実行なのですが、前方に記述されているons.readyが先に実行されます。
その後にnend広告が展開するわけですが、#nend_wrapperのcloneの時点で広告がありませんので、失敗した状態になります。

要するに、ons.readyが早く記述されているのが問題です。

html
1(略)
2    <div id="nend_wrapper">
3        <script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script>    
4    </div>
5    <script>
6      ons.ready(function() {
7          var nendOriginalElem = angular.element(document.querySelector('#nend_wrapper'));
8          var nendInjectElem1 = angular.element(document.querySelector('#new_nend_wrapper'));
9          nendInjectElem1.replaceWith(nendOriginalElem.clone());
10          console.log("view ad")
11      });
12    </script>
13</body>
14</html>