【Monaca】メニューにネイティブアド風のZucks Affiliate広告を表示する

Zucks Affiliateの広告取得APIを利用して、アプリのメニューにネイティブアド風のZucks Affiliate広告を表示するコードを掲載します。
実際にアプリで使用しているコードとほぼ一緒です。
Zucks Affiliateの登録は、下記バナーからお願いします。

例えば「アイアン・スローン（Iron Throne）」、新規アプリインストール後の初回アプリ起動で、700円の報酬が得られます。

Monacaのテンプレート「Onsen UI V2 Angular 1 Splitter」を使用します。
[www]フォルダの下に[js]フォルダを作成し、moment.min.jsを配置、app.jsを新規作成します。
app.jsの5行目、アプリ登録時にZucks側が指定したメディアIDに書き換えてください。

Android

iOS

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script src="js/moment.min.js"></script>
  <script src="js/app.js"></script>
</head>
<body>

  <ons-splitter ng-controller="AppController" var="splitter">
    <ons-splitter-side side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item ng-click="load('home.html')" tappable>
            Home
          </ons-list-item>
          <ons-list-item ng-click="load('settings.html')" tappable>
            Settings
          </ons-list-item>
          <ons-list-item ng-click="load('about.html')" tappable>
            About
          </ons-list-item>
          <ons-listr-item ng-show="zucksList.length > 0">
            <div id="zucks-ads">
                <img ng-src="{{zucks.img}}" class="img-menu-zucks_img">
                <div class="div-menu-zucks_title">{{zucks.title}}</div>
                <div class="div-menu-zucks_description">{{zucks.description}}</div>
            </div>
          </ons-listr-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content page="home.html"></ons-splitter-content>
  </ons-splitter>

  <ons-template id="home.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Main
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        Swipe right to open the menu!
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="settings.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Settings
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

  <ons-template id="about.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          About
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<ons-splitter ng-controller="AppController" var="splitter">

<ons-splitter-side side="left" width="220px" collapse swipeable>

<ons-page>

<ons-list>

<ons-list-item ng-click="load('home.html')" tappable>

Home

</ons-list-item>

<ons-list-item ng-click="load('settings.html')" tappable>

Settings

</ons-list-item>

<ons-list-item ng-click="load('about.html')" tappable>

About

</ons-list-item>

<ons-listr-item ng-show="zucksList.length > 0">

<div class="div-menu-zucks_title">{{zucks.title}}</div>

<div class="div-menu-zucks_description">{{zucks.description}}</div>

</div>

</ons-listr-item>

</ons-list>

</ons-page>

</ons-splitter-side>

<ons-splitter-content page="home.html"></ons-splitter-content>

</ons-splitter>

<ons-template id="home.html">

<ons-page>

<ons-toolbar>

<ons-toolbar-button ng-click="toggle()">

<ons-icon icon="md-menu"></ons-icon>

</ons-toolbar-button>

</div>

Main

</div>

</ons-toolbar>

Swipe right to open the menu!

</p>

</ons-page>

</ons-template>

<ons-template id="settings.html">

<ons-page>

<ons-toolbar>

<ons-toolbar-button ng-click="app.toggle()">

<ons-icon icon="md-menu"></ons-icon>

</ons-toolbar-button>

</div>

Settings

</div>

</ons-toolbar>

</ons-page>

</ons-template>

<ons-template id="about.html">

<ons-page>

<ons-toolbar>

<ons-toolbar-button ng-click="app.toggle()">

<ons-icon icon="md-menu"></ons-icon>

</ons-toolbar-button>

</div>

About

</div>

</ons-toolbar>

</ons-page>

</ons-template>

</body>

</html>

style.css

#zucks-ads {
  position: relative;
  display: block;
  width: 100%;
  height: 80px;
  overflow: hidden;
}
.img-menu-zucks_img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
}
.div-menu-zucks_title {
  position: absolute;
  top: 4px;
  left: 85px;
  width: 130px;
  height: 14px;
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.div-menu-zucks_description {
  position: absolute;
  top: 21px;
  left: 85px;
  width: 130px;
  height: 55px;
  font-size: 12px;
  line-height: 14px;
    overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

#zucks-ads {

position: relative;

display: block;

width: 100%;

height: 80px;

overflow: hidden;

}

.img-menu-zucks_img {

position: absolute;

display: block;

top: 0;

left: 0;

width: 80px;

height: 80px;

}

.div-menu-zucks_title {

position: absolute;

top: 4px;

left: 85px;

width: 130px;

height: 14px;

font-size: 12px;

font-weight: bold;

line-height: 14px;

overflow: hidden;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 1;

}

.div-menu-zucks_description {

position: absolute;

top: 21px;

left: 85px;

width: 130px;

height: 55px;

font-size: 12px;

line-height: 14px;

overflow: hidden;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;

}

app.js

"use strict";
var app = ons.bootstrap("myApp", ["onsen"]);
app.factory("$zucks", ["$q", "$http", function ($q, $http) {
  var sv = {
    mediaId: "アプリ登録時にZucks側で指定したメディアID",
    getAdsList: function (device) {
      var def = $q.defer();
      $http({
        method: "GET",
        url: "https://get.mobu.jp/api/ads/3.3/?pcode=" + sv.mediaId + "&device=" + device + "&count=10"
      }).then(function (res) {
        // get response
        def.resolve(res);
      }).catch(function (res) {
        def.reject(sv.httpErrorMessage(res.data, res.status, res.headers, res.config));
      });
      return def.promise;
    },
    httpErrorMessage: function (data, status, headers, config) {
      var err = {
        code: status,
        message: config.method + " " + config.url + "<br />"
      };
      if (data.hasOwnProperty("error")) {
        err.message += data.error.code + " " + data.error.message;
      }
      if (data.hasOwnProperty("error_description")) {
        err.message += data.error_description;
      }
      return err;
    }
  };
  return sv;
}]);
app.controller("AppController", ["$scope", "$zucks", function($scope, $zucks) {
  $scope.load = function(page) {
    $scope.splitter.content.load(page);
    $scope.splitter.left.close();
  };

  $scope.toggle = function() {
    if ($scope.zucksList.length > 0) {
      var r = Math.round(Math.random() * $scope.zucksList.length);
      var zucks = document.querySelector("#zucks-ads");
      $scope.zucks = $scope.zucksList[r];
      if (zucks) {
        angular.element(zucks).bind("click", function (e) {
          window.open($scope.zucks.url, "_system", "location=no");
        });
      }
      if (!$scope.$$phase) $scope.$apply();
    }
    $scope.splitter.left.toggle();
  };

  // zucks affiliate
  $scope.zucksList = [];
  $scope.device = ons.platform.isIOS() ? "ios" : "android";
  $zucks.getAdsList($scope.device).then(function (res) {
    if (res.data.adSearch) {
      var ad = res.data.adSearch.ads.ad;
      if (ad.length > 0) {
        for (var i = 0; i < ad.length; i++) {
          if (ad[i].remaining_conversion_count > 0) {
            if (!moment(ad[i].limit_date)._isValid) {
              $scope.zucksList.push({
                title: ad[i].title,
                description: ad[i].description,
                img: ad[i].img,
                url: ad[i].url
              });
            } else if (moment(ad[i].limit_date).diff(moment(), "day") >= 0) {
              $scope.zucksList.push({
                title: ad[i].title,
                description: ad[i].description,
                img: ad[i].img,
                url: ad[i].url
              });
            }
          }
        }
      }
    }
  }, function (err) {
    alart(err);
  });
}]);

"use strict";

var app = ons.bootstrap("myApp", ["onsen"]);

app.factory("$zucks", ["$q", "$http", function ($q, $http) {

var sv = {

mediaId: "アプリ登録時にZucks側で指定したメディアID",

getAdsList: function (device) {

var def = $q.defer();

$http({

method: "GET",

url: "https://get.mobu.jp/api/ads/3.3/?pcode=" + sv.mediaId + "&device=" + device + "&count=10"

}).then(function (res) {

// get response

def.resolve(res);

}).catch(function (res) {

def.reject(sv.httpErrorMessage(res.data, res.status, res.headers, res.config));

});

return def.promise;

httpErrorMessage: function (data, status, headers, config) {

var err = {

code: status,

message: config.method + " " + config.url + "<br />"

};

if (data.hasOwnProperty("error")) {

err.message += data.error.code + " " + data.error.message;

}

if (data.hasOwnProperty("error_description")) {

err.message += data.error_description;

}

return err;

}

};

return sv;

}]);

app.controller("AppController", ["$scope", "$zucks", function($scope, $zucks) {

$scope.load = function(page) {

$scope.splitter.content.load(page);

$scope.splitter.left.close();

};

$scope.toggle = function() {

if ($scope.zucksList.length > 0) {

var r = Math.round(Math.random() * $scope.zucksList.length);

var zucks = document.querySelector("#zucks-ads");

$scope.zucks = $scope.zucksList[r];

if (zucks) {

angular.element(zucks).bind("click", function (e) {

window.open($scope.zucks.url, "_system", "location=no");

});

}

if (!$scope.$$phase) $scope.$apply();

}

$scope.splitter.left.toggle();

};

// zucks affiliate

$scope.zucksList = [];

$scope.device = ons.platform.isIOS() ? "ios" : "android";

$zucks.getAdsList($scope.device).then(function (res) {

if (res.data.adSearch) {

var ad = res.data.adSearch.ads.ad;

if (ad.length > 0) {

for (var i = 0; i < ad.length; i++) {

if (ad[i].remaining_conversion_count > 0) {

if (!moment(ad[i].limit_date)._isValid) {

$scope.zucksList.push({

title: ad[i].title,

description: ad[i].description,

img: ad[i].img,

url: ad[i].url

});

} else if (moment(ad[i].limit_date).diff(moment(), "day") >= 0) {

$scope.zucksList.push({

title: ad[i].title,

description: ad[i].description,

img: ad[i].img,

url: ad[i].url

});

}

}, function (err) {

alart(err);

});

}]);

Zucks Affiliateの登録は下記バナーからお願いします。

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

【Monaca】メニューにネイティブアド風のZucks Affiliate広告を表示する

「シンプル利益計算」の入力方法

【Cordova】Ver.8.1.2「cordova-plugin-crypt-file」ENOENT: no such file or directory, open 'DecryptResource.java' エラー回避方法

【Monaca】メニューにネイティブアド風のZucks Affiliate広告を表示する

Recommended Posts

【Cordova】admob-plusプラグインにおいて広告が表示されない場合の対処方法

【Cordova】cordova-plugin-local-notificationプラグインの通知clickイベントが発火しない場合の対処方法

【Cordova】ビルド時にgradleの「journal-1.lock」ファイルロックが発生した場合の対処方法