アプリのアフィリエイトリンクをきれいに表示させる方法【アプリーチ使用】

アプリのアフィリエイトリンクをきれいに表示させる方法【アプリーチ使用】アフィリエイト
2020.05.15

アプリのアフィリエイトリンクをきれいに表示させる方法をご紹介します。

↓例えば、こんな感じでアプリのアフィリエイトリンクを貼る方法です。

漫画アプリアフィリエイト

↓スマホから見るとこんな感じです。

漫画アプリアフィリエイトリンク(スマホ)

バリューコマースの広告で「ebookjapan(イーブックジャパン)」をアフィリエイトする例を挙げますね。

アプリのアフィリエイトリンクをきれいに表示させる方法

アプリのアフィリエイトリンクをきれいに表示させる時に使っているのはアプリーチです。無料で使えるツールです。

アプリーチTOP画面

⇒アプリーチ

iPhoneアプリ・Androidアプリを同時に表示してくれますし、スッキリきれいです。

アプリーチの使い方

今回は電子書籍サービス「ebookjapan(イーブックジャパン)」をアフィリエイトする時の使い方です。

私は「ebookjapan(イーブックジャパン)」のアフィリエイトにバリューコマース(ASP)の広告を利用しています。

バリューコマースのアフィリエイトリンクをアプリーチで使用する方法のご紹介です。

バリューコマースは、ebookjapanの他にも電子書籍サービス広告をたくさん扱っています。

バリューコマース

バリューコマースへ登録済の場合は、ebookjapanに広告利用申請すれば審査無しですぐにアフィリエイトできます。他の電子書籍サービスだと審査が必要な場合もあります。
ebookjapanは新規購入で2,717円の報酬になります。(※2020年5月現在) 

 

ブログパーツ作成

アプリーチの TOPページを開きます。

少し下にスクロールすると「ブログパーツ作成」の項目があります。

「アプリ名」にebookjapanと入力し、「検索」ボタンをクリックします。

アプリーチの使い方(バリューコマースリンク)

↓

アプリーチ使い方

※「複数検索」を押すと、似たような内容のアプリも検索結果に表れます。「検索」で目当てのアプリが見つからない時に利用するといいと思います。

 

出力イメージを確認

アプリーチ使い方

ここでブログパーツをどのように表示させるか選択できます。

ボタンを押して項目変更してみると、下の画像が微妙に変化します。自分好みの設定にするといいですよ。

よく分からないのは「target=”_blank”の付与」だと思います。私は「あり」にしています。

「target=”_blank”の付与」
あり⇒リンク先を別ウィンドウ（タブ）で新しく開く
なし⇒表示されているページがそのままリンク先に変わる
 

アフィリエイトリンクの設定

アプリーチ使い方

赤枠部分にアフィリエイトリンクをコピペします。

アフィリエイトリンクの取得方法(バリューコマース)

他ASPのアフィリエイトリンクでも使用できますが、今回はバリューコマースを利用します。

バリューコマース

 バリューコマースログイン後のTOP画面の上にある検索窓に「ebookjapan」と入力検索します。

バリューコマース使い方

↓

「広告素材を選ぶ」をクリック

バリューコマース使い方
次の画面で、どの素材でもいいので「広告作成」をクリックします。

出てきた「広告タグ」の赤枠部分をコピーします。

バリューコマース使い方

//ck.jp.ap.valuecommerce.com/servlet/referral?sid=○○○○○&pid=886536737

この部分だけです。「”」はコピーしません。これに「https:」をつけてアプリーチの赤枠部分に入力します。

アプリーチ使い方

「コピーする」をクリックしてブログで表示させたい部分貼り付けます。(テキストモードで貼り付けます)

「新コード」⇒カスタマイズ可能
「旧コード」⇒カスタマイズできない

特にカスタマイズしなくてもいい場合は、「旧コード」だけブログに貼ればいいです。

 

カスタマイズしたい場合は、新コードをブログに貼って、以下のCSS(※)をWordPressの「追加CSS」に貼り付けます

【CSSの貼り方】
WordPressの管理画面左のメニューから「外観」⇒「カスタマイズ」をクリック。「追加CSS」をクリックしてそこに貼り付けてください。

↓(※)以下のCSSはこれです。アプリーチ公式サイトのものです。

.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

ブログにコードを貼ったら、リンクをクリックしてちゃんとリンク先に移動するか確認してくださいね。

以上で完了です。おつかれさまでした(*^-^*)

 

タイトルとURLをコピーしました