0

I am trying to integrate inMobi ads into my Monaca project. The current Monaca tutorial seems to be outdated so I talked to one of the InMobi staff. He told me to put this code in where I want it.

<script type="text/javascript"> var inmobi_conf = { siteid : myID, slot : "15", }; </script><script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>

myID is obviously replaced with my property ID. Whenever I add this between or outside a ons-scroller tag I cannot see the ads. The only time when the ads work is when I put it in index.html before the ons-screen tag, but then I am not able to move the ad to the bottom. Where is the best place to put this code in the page I want?

Thanks, Ben

Andi Pavllo
  • 2,506
  • 4
  • 18
  • 30
benjipelletier
  • 653
  • 5
  • 11
  • 29

3 Answers3

2

There are a couple of ways you could achieve this.

  1. sticky feature (scroll down to read on how to stick the ad to the bottom) https://www.inmobi.com/support/integration/23906512/22051163/mobile-web-integration-guide/
  2. adhesion ads ( upcoming feature, watch out for this :-) )

Akshay JS Dev, InMobi

Akshaya Shanbhogue
  • 1,438
  • 1
  • 13
  • 25
  • Hi, I have tried stickies but the ads just disappear. The answer below solved the placement issue but lead to more problems. Thanks – benjipelletier Feb 24 '14 at 15:32
1

You can add it in index.html after ons-screen. and then position it with this css.

.inmobi-ad {
    position: fixed;
    bottom: 0;
}
Tamura
  • 1,788
  • 1
  • 14
  • 10
  • Hi, Thanks it helped moved the app to the bottom, but there are still some issues. I am not sure if you can answer these, but I cannot get an answer from InMobi support. 1. I am getting these errors on loadup (in http://cf.cdn.inmobi.com/ad/inmobi.js:1 ) (in http://cf.cdn.inmobi.com/ad/adapters/sprout-imraid.1.0.0.js:1 ) 2. When I scroll on the ad it scrolls the top tab bar up: http://i.imgur.com/JO6msBO.jpg 3. When I click the ad I get Page Not Found because it is trying to open within the hybrid browser. Thanks, Ben – benjipelletier Feb 24 '14 at 07:55
  • 1
    1. I guess it's because inmobi script is trying to access your page which is prevented by the browser which is fine 2. Are you using ons-scroller? can you add another screen-shot when you haven't do the scroll 3. It's a bug of our debugger and we are working on that. – Tamura Feb 24 '14 at 11:57
  • Here is the screenshot before scrolling http://i.imgur.com/PX8SSkK.jpg note: it is not when I scroll on the page but on the ad. The ad is in index.html which does not have ons-scroller, it only has ons-screen leading to a page with ons-scroller. Thanks – benjipelletier Feb 24 '14 at 15:28
  • It looks like the parent div is occupying some space. Can you tell us a little bit more about your DOM heirarchy? – Akshaya Shanbhogue Feb 24 '14 at 20:51
  • It's working good on my Nexus 7. Can you give info about your device/os/version? – Tamura Feb 25 '14 at 11:04
  • @Tamura Yes my device is Iphone 5/ios7/7.0.4 – benjipelletier Feb 25 '14 at 11:16
  • @Akshay I believe this is the DOM hierarchy for index.html. Please let me know if it isn't since I am new to web development. http://i.imgur.com/CeUo0n1.png – benjipelletier Feb 25 '14 at 11:34
  • @breadedturtle: i tested with same device iphone 5/ios7/7.0.4 and it's working fine. scrolling the ads has no effect on the toolbar. You can see the example code here. http://onsenui.github.io/stackoverflow/inmobi.zip You can also import it to Monaca ide by clicking on new project, click on Import tap, and point to this url. – Tamura Feb 25 '14 at 11:57
  • @Tamura Great, That fixed it. Thanks a lot. But now it seems to give me many errors: http://pastebin.com/ugiUe4Hw also here is my index.html so you can see: http://pastebin.com/quU7zPXC and app.js is the same as in the .zip file u sent – benjipelletier Feb 25 '14 at 12:35
  • sorry the app.js i sent you accidentally include a $timeout statement. Just delete it and the errors will be gone. – Tamura Feb 25 '14 at 12:45
0

In your index.html page, you should:

<body>
<ons-screen page="home_navigator.html"></ons-screen>
<script type="text/javascript">
    var inmobi_conf = {
    siteid : 'f2aca88ff3d94715b354dd6af9da8326',
    slot : "15",
    sticky: "bottom"
};
</script>
<script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>
</body>

And you might need to put ons-scroller in another page, page1.html for example to get your scroller work and ads appear at the bottom. :)

Nakket
  • 620
  • 7
  • 18