ポチップTIPS – 自己満足カスタマイズ 小ネタ集(あったらいいな編)

※このアイキャッチの間違いにツッコめる人はたぶん同年代

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs202263/point-of-view.blog/public_html/wp-includes/formatting.php on line 765

こんなPochippユーザーに読んでほしい!

  • Pochippをゴリゴリ使い倒している
  • Pochippで本を紹介することが多い
  • Pochippでもっと売上をあげたい
あらすじ

どんどん高機能になっていく「Pochipp ポチップ」

SWELL同様、どんどん高機能になっていく商品リンクツールの救世主「Pochipp ポチップ」

みなさん使いこなせてますか?

ワタクシはまだまだ使いこなせていません。。。

ただ、いままで「丸出だめ夫」だったのが、ポチップを導入してから「ポチポチ」売れるようになってきたました。

ありがとうございます!

先日も各モールのセール情報を自動で取得するという神アップデートがあったばかりですが、

@hiro_develop127

今後も、おたのしみ機能の追加など、もっと高機能化かつユースフルなツールとしてアップデートされていくことでしょう。

そんなポチップに、またしても「自己満足カスタマイズ」を加えて、さらに効果的な使い方をご紹介したいと思います。

あ、くれぐれも

「自己満足カスタマイズは、自己責任カスタマイズ」

でお願いします。

今回のカスタマイズの概要

今回のカスタマイズは、

ヤモヲ

「共通設定」部分を商品ごとにフレキシブルに変更できればいいのになぁ

という発想から、できる限りフロントエンドで完結できるカスタマイズ方法を考えてみました。

概要としては、

  • カスタムボタンに他のアフィリエイトの「商品リンク」を設置したい
  • カスタムボタンにも「セール情報」を表示したい
  • 書籍商品の場合は「ヨメレバ」のようにボタンを配置したい

といった内容になります。

最終的にはこうなります。

他のアフィリエイトボタンを追加

ユニフレーム(UNIFLAME)
¥4,900 (2021/09/18 01:51時点 | Amazon調べ)

「ヨメレバ」風のボタン配置

スクリプトでカスタマイズする部分が多いですが、今回は jQueryではなくJavaScriptのみで実装します。

jQueryだともっと簡単に実装できるのですが、SWELLは「脱jQuery」テーですので。

ご興味ありましたらお付き合いください。

カスタマイズの前に、ポチップの基本設定を理解

ポチップをカスタマイズする前に、まずはポチップの基本設定を理解して「やれること・やれないこと」を整理しましょう。

今回のカスタマイズは「見た目」部分のカスタマイズになりますので、その点の設定を確認します。

カスタマイズに関わる部分の「共通設定」

ポチップの見た目や機能に関わる設定は、ダッシュボードの左メニューの、ポチップ管理>ポチップ設定 より行います。

なお、ここで行う設定は、サイト内のすべてのポチップブロックに共通の設定となります。

ボックスのデザイン設定

ポチップブロックのレイアウトおよび、各モールボタンカスタムボタンのデザインやサイズを設定します。基本的にはデフォルトの設定です。

  • レイアウト(PC):標準
  • レイアウト(モバイル):縦並び
  • 画像の配置:左
  • ボタンスタイル:標準
  • ボタンの丸み:四角
  • ボタン幅(PC):自動フィット
  • ボタン幅(モバイル):1列幅

各ボタンの表示テキスト

各ボタンの表示テキストを設定します。
なお、カスタムボタンについては、各ポチップブロックの管理画面から個別で設定が可能です。

  • Amazonボタン:Amazon
  • 楽天市場ボタン:楽天市場
  • Yahooショッピングボタン:Yahooショッピング
  • PayPayモールボタン:PayPayモール

カスタムボタンの色

カスタムボタン1・2のボタンの色を設定します。

  • カスタムボタン1:任意
  • カスタムボタン2:任意

セール情報の設定

先日のアップデートで「セール情報の自動取得」機能が追加されたので、各モールのセール情報は自動取得するように設定しています。

  • 自動取得を有効にする:チェック

以上が今回のカスタマイズに関わる共通設定の内容です。

カスタムボタンに他のアフィリエイトの「商品リンク」を設置したい

ポチップで設置できるボタンの数は、

  • Amazon
  • 楽天市場
  • Yahoo!ショッピング(または、PayPayモール)

 の基本ボタンが3つと、

  • カスタムボタン(2つまで)

 の合計5つ

この「カスタムボタン」をどう使うかですが、

公式サイトへのリンクなど、報酬の発生しないボタンを配置するのも、なんだかもったい気がしますよね。

どうせなら、A8.netなどのアフィリエイト・サービス・プロバイダー(以下、ASP)の「商品リンク」をカスタマイズボタンに設定したいと思います。

ユーザーにとっては、購入先の選択肢が多い方がいいかなと。

あったらいいな~カスタマイズ

  • ASPの商品リンクを設定した特定のカスタムボタンだけ色を変えたい
  • 報酬率の高いASPの商品リンクボタンを、ボタンの先頭に並べたい
  • カスタムボタンにも「セール情報」を表示したい

ですが、

  • 各ボタンの色は「共通設定」で管理されている
  • 各ボタンの並び順は変更できない
  • セール情報は「Amazon」「楽天市場」「Yahooショッピング」にしか表示できない

という仕様なので、この課題をカスタマイズでクリアします。

ASPから「商品リンク」を取得し、カスタムボタンに設定

A8.netなどのASPより、提携中のプログラムから紹介する商品の「商品リンク」を取得します。

ここでは、A8.netを例にご説明します。

STEP
ポチップの商品検索で基本ボタンを設定

ポチップブロックにて「Amazon」「楽天市場」「Yahooショッピング」のボタンを設定します。

この例では、「ファイアグリル solo」という商品を設定します。

STEP
公式ショップより、紹介する商品ページのURLをコピー

この例では、アウトドアショップ「ナチュラム」の商品ページを使用します。

STEP
A8プログラム管理より、提携プログラムの「商品リンク」をクリック
STEP
「フリー素材生成」より、アフィリエイトURLを取得

商品ページのURLを「フリー素材生成」にコピペして、商品リンク用のURLを生成します。

STEP
ポチップブロックの管理画面より、カスタムボタンにアフィリエイトURLを設定

「カスタムボタン1」の「テキスト」をショップ名に変更し、「リンク先」に先程取得した商品リンク用URLをコピペして保存します。

STEP
ポチップにカスタムボタンを表示

商品リンク用URLが設定されたカスタムボタンが表示されます。

※画像です

これで、ASPの商品リンクボタンが設置できました。

ここまでは、ポチップの基本機能で実現できます。

ポチップブロックのボタン部分のHTML要素をみてみましょう。
※Amazonと楽天市場は「もしもアフィリエイト」経由です

<div class="pochipp-box__btns" data-maxclmn-pc="fit" data-maxclmn-mb="1">
	<!-- ボタン:Amazon -->
	<div class="pochipp-box__btnwrap -amazon">
		<a href="アフィリエイトリンク" class="pochipp-box__btn" rel="nofollow noopener" target="_blank">
			<span>Amazon</span>
			<img src="トラッキング用画像" data-src="トラッキング用画像" width="1" height="1" style="border:none;" class=" lazyloaded">
		</a>
	</div>
	<!-- ボタン:楽天市場 -->
	<div class="pochipp-box__btnwrap -rakuten">
		<a href="アフィリエイトリンク" class="pochipp-box__btn" rel="nofollow noopener" target="_blank">
			<span>楽天市場</span>
			<img src="トラッキング用画像" data-src="トラッキング用画像" width="1" height="1" style="border:none;" class=" lazyloaded">
		</a>
	</div>
	<!-- ボタン:Yahooショッピング -->
	<div class="pochipp-box__btnwrap -yahoo -long-text">
		<a href="アフィリエイトリンク" class="pochipp-box__btn" rel="nofollow" target="_blank" data-nodal="">
			<span>Yahooショッピング</span>
		</a>
	</div>
	<!-- ボタン:カスタム -->
	<div class="pochipp-box__btnwrap -custom">
		<a href="アフィリエイトリンク" class="pochipp-box__btn" rel="nofollow noopener" target="_blank">
			<span>ナチュラム公式</span>
		</a>
	</div>
</div>

このように、上から「Amazon」「楽天市場」「Yahooショッピング」「カスタムボタン」という順にボタンが並びます。

特定のボタンの色を変更

それぞれのボタンに以下のクラスが付与されています。

  • Amazon:-amazon
  • 楽天市場:-rakuten
  • Yahooショッピング:-yahoo
  • カスタムボタン:-custom (カスタムボタン2は -custom_2

ただし、特定のポチップブロックのみに適用したいので、ポチップブロックを特定するためのクラス名を設定します。

ポチップブロックを選択し、設定サイドバーの「高度な設定>追加CSSクラス」custom-01を設定。

で、そのポチップブロックのみカスタムボタン-customの色を変更するには、以下のCSSをページの「カスタムCSS&JS」に追記します。

.custom-01[data-btn-style=dflt] .-custom>.pochipp-box__btn {
    background: #007F3C;
}

すると、このようになります。

※画像です

これを応用すれば、Amazonなどの基本ボタンの色も変更できます。かんたんですね。

特定のボタンを先頭に移動

だいたいの商品は、Amazonや楽天市場より、ASPの商品リンクほうが報酬率が高いですよね。

せっかくなら、カスタムボタンで追加したアフィリエイトボタンを、常に先頭に表示したいと思います。

すべてのボタンは親要素pochipp-box__btnsdisplay: flexプロパティで定義されているので、子要素である各ボタンをorderプロパティで順番を指定することができます。

要するに、各ボタンの順番はCSSのみで変更することができます

なお、セール情報が設定された基本ボタンにはorder:-1が定義された-on-saleクラスが付与されていますので、自動的に先頭になるような仕様になっています。

以下のCSSを、「カスタムCSS&JS」に追記します。

.custom-01 .pochipp-box__btnwrap.-custom {
    order: -2;
}
  • 2行目order: -2;
    orderプロパティでカスタムボタンを先頭に配置する指定。
    「セール情報」表示中のボタンは「-1」となるので、それよりも小さい数値を指定すれば、常に先頭に配置されます。

すると、このようになります。

※画像です

例)楽天市場がセール中の場合

※画像です

このorderプロパティを応用すれば、他のボタンの並び順も変更できますね。

カスタムボタンにも「セール情報」のテキストを表示

基本の「Amazon」「楽天市場」「Yahooショッピング」には、「ポチップ管理>セール情報」設定でセール情報を表示させることができますが、カスタムボタンにはその機能はありません。

ということで、これをまたJavaScriptでカスタマイズします。

今回は、カスタムボタンの上に「\公式ショップSALE中/」というテキストを表示させます。

以下のスクリプトを、「カスタムCSS&JS」に追加します。

let txtInsert = '<div class="pochipp-box__saleInfo -top">\公式ショップSALE中/</div>';
let btnCustom= document.querySelectorAll('.custom-01 .-custom');
for (i = 0, len = btnCustom.length; i < len; i++) {
    btnCustom[i].insertAdjacentHTML('afterbegin', txtInsert);
}
  • 4行目btnCustom[i].insertAdjacentHTML
    insertAdjacentHTMLメソッドで、カスタムボタン要素の前にHTML要素を追加します。

※forループにより、同じポチップブロックを複数配置する場合に対応しています。

参考: insertAdjacentHTML( position, text ) メソッドについて

第一引数:position

  • beforebegin … 要素の直前
  • afterend … 要素の直後
  • afterbegin … 子要素の最初
  • beforeend … 子要素の最後

第二引数:text … html要素

これで完成です!

※画像です

カスタムボタンはどの位置にあってもかまいません。

まとめるとこんなカンジです

※画像です

CSS:カスタムボタンの色変更・先頭に表示

/* カスタムボタンの色を変更 */
.custom-01[data-btn-style=dflt] .-custom>.pochipp-box__btn {
    background: #007F3C;
}

/* カスタムボタンを常に先頭に表示 */
.custom-01 .pochipp-box__btnwrap.-custom {
    order: -2;
}

スクリプト:カスタムボタンにセール情報を表示