最初はつまづく Cocoonアフィリエイトタグ・リンク貼り方。

Cocoon(コクーン)
スポンサーリンク

Cocoonテーマでのアフィリエイトタグの貼り方、使い方・コツを共有します。ブロックエディタ対応です。

ドンちゃん
ドンちゃん

Cocoonは入れたけれど、広告コードはどうやって入れるの?

ドンちゃん
ドンちゃん

ボタンリンク。そう、あの光るボタンへのリンク挿入ってどうやってやるの?

広告の貼り方は最初に誰もがつまづきます。私もつまづき、右往左往。なんとか解決して今に至りますが、効率のよい道のりではなかった。同じ境遇の方に、知っている情報を共有します。

ブログで収益をあげるのに、クリック型(Googleアドセンス等)や成果報酬型(主にASP)がありますが、内容的に今回は後者です。アドセンス、アマゾン、楽天アフィリエイトなどはCocoonマニュアル側にノウハウがたくさんあるのでそちらご参照を。

私が初心者で最初の頃、つまづいたのが一般的なASP会社をつかったアフィリエイト。広告コードというものがイマイチ分からなかった。種類や作り方、張り方、コードをいじっていいのかよくないのか。バナーを貼り付けてもなんだかうまく表示してこないぞ…とか。

チャンビア
チャンビア

ASPの広告の種類や張り方を正しく理解することが、成果報酬をつかみ取る第一歩です。

スポンサーリンク

ASPの登録がまだの方

まだ何も登録が…という方は、せっかくサイトを構築したのであればASPを登録してみましょう。

記事がいくつかあると申請しやすくなります。

A8.net のようにサイトがなくても登録可能な会社もあります。A8はブログやる人はみんな入っています。案件数が段違い。

あと、私と同じような旅行系のトピックを扱う場合は、バリューコマースアクセストレードは入れたほうが良い。当サイトでは、バリューコマースで最も成果を上げています。最近は特単(特別単価)もいただけるようになってきました。

※2019年8月31日までですが、バリューコマースでサイト登録+最初の広告掲載で300円もらえるキャンペーン実施中。

詳細はこちら

ASPに登録することでどんな案件があるのか見ることができます。アフィリエイトは広告ビジネスなので、案件を見ることで世の中の広告の流れをつかむことができます。

Cocoonアフィリエイトタグ・リンク貼り方(ASPからはセルフバックできることがある)
ASPからはセルフバックできることがある

また、大抵どのサイトにも「セルフバック」という仕組みがあり、アフィリエイト成約うんぬん置いておいて自分自身の購入で金銭価値のあるキックバックを受けることができます。何かサービスを使う機会があるのであればASPの案件を見て、ある種のキャッシュバックを受ければ機会損失を防ぐことができます。

私は陸マイラーでもあるのでポイントサイトを使ってキャッシュバック、マイルを貯める足しにしています。ASPのキャッシュバックはポイントサイトとも比べても条件がいいですね。

ASP各社の知名度

Googleトレンドより。a8は検索しやすいからずるい(苦笑

こういうのを見ると、一発で覚えられるネーミングって大事だなぁって思う。

Googleトレンドで比較したASP各社の人気具合
Googleトレンドで比較したASP各社の人気具合

ずるいa8外すとこんな感じ。

Googleトレンドで比較したASP各社の人気具合(A8外した)
A8外した

ASP各社のざっくりした特徴

ASPで広告収入を得る方法

ASPで広告収入を得る流れ
  • ステップ1
    案件を見つける
  • ステップ2
    広告主と提携する
  • ステップ3
    案件を調査する
  • ステップ4
    記事を書く
  • ステップ5
    広告を貼り付ける
  • ステップ6
    経過を見る、工夫する

案件を見つける

Cocoonアフィリエイトタグ・リンク貼り方(A8で探すと案件多すぎて迷子になる件)
A8で探すと案件多すぎて迷子になる件

ざっくりと2種類の方法。

  • 能動的に見つける
  • 受動的に見つける

前者「能動的に見つける」はASPの管理画面から見つけにいく方法です。自分のブログと相性のよいものがあれば、それに関連する記事を書く、または既存の記事の中に入れ込めそうならそれとなく入れ込みます。

後者「受動的に見つける」は、自分がブログ読者のとき、街中で何か気になったモノやサービスがあったときにASPに取扱いがないか見にいく方法です。特にアフィリエイトを意識せず書いた記事でも後々思いつきで差し込むことがあります。集客力の高い記事だと案外発生する。

どちらの方法も「自分のブログとの相性」を大事にしましょう。

広告主と提携する

Cocoonアフィリエイトタグ・リンク貼り方(落とされると凹みます)
落とされると凹みます

コレいいな、という商品やサービスがあれば広告主と提携します。

提携には審査があるものと、審査なしで即時に提携されるものがあります。私も審査に通らなかったことが数えるほどですが経験はしています。若干、否定された気持ちになりますね… まぁ、そんなときは切り替えて類似した商品やサービスを探します。

案件を調査する

Cocoonアフィリエイトタグ・リンク貼り方(ちゃんと使って記事にしたい)
ちゃんと使って記事にしたい

商品やサービスを選んだら、それらをよく知ることから始めます。人によって購入したり、レンタルしたりと実際に使ってみるとそれらの良さや、イマイチな点が理解できる。過去に似たものをつかったことがあるならその経験を活かしてもよいでしょう。

記事を書く

可能な限り実体験をもとに記事を書いていきましょう。

Cocoonアフィリエイトタグ・リンク貼り方(さぁ、魂を込めて記事を書こう)
さぁ、魂を込めて記事を書こう

単純に公式ホームページを焼きまわすコタツ記事だと、上位表示も難しいし、見る人が見れば実体験に基づいていないというのがわかります。当ブログ内で「変なSIM」という海外用のSIMカードを投稿していますが、レビュー記事をGoogleで探すと海外では使ったことないな…という記事を見かけます。

記事はタイトルに商標を入れるパターン、悩み解決型などパターンはあります。この辺り自分が読者になって上手い人を吸収していくのが早道。

広告を貼り付ける

テキストリンク、バナーリンクを自然な形で配置していきます。パソコンとスマホ両方から不自然な感じが出ていないかチェックしましょう。

経過を見る、工夫する

ワードプレスのJetPackプラグインは大抵の人が入れると思います。

Cocoonアフィリエイトタグ・リンク貼り方(JetPackでカウントできるクリック数)
JetPackでカウントできるクリック数

「クリック数」という項目でクリックされたリンクが表示されるので、定期的にみるようにしましょう。あまり、クリックされている感覚がなければ配置をかえるとかバナーリンクからテキストリンクへの変更(またはその逆)を行います。

CocoonテーマでのASPコード張り方

使用するエディタ

Cocoonアフィリエイトタグ・リンク貼り方(Cocoonのエディタはクラシックか、ブロックか)
Cocoonのエディタはクラシックか、ブロックか

私は、ブロックエディタを推奨します。使い勝手で先延ばししている方もまだおられると思いますが、広告コードのメンテナンスとしてはブロックエディタが使いやすい(断然)

繰り返します。断然です。

なので、クラシックエディタの使い方を一通りマスターしていたら即移行を勧めます。

スポンサーリンク

ボタンのこと

Cocoon機能に備わっているボタンの話(Gutenberg標準のボタンは除く)。

2種類のボタン
  • URLを入れてリンク挿入するボタン(通常のボタン)
  • ASPの広告コードをそのまま挿入するボタン(囲みボタン)
Cocoonアフィリエイトタグ・リンク貼り方(Cocoonにある2種類のボタン)
Cocoon 2種類のボタン(ブロックエディタの場合)

▲ 上記は、ブロックエディタ上でボタンを挿入した初期状態です。左がURL挿入タイプ、右が広告コード挿入タイプです。左は見たままですが、右がよくわからないですよね。

Cocoonアフィリエイトタグ・リンク貼り方(アフィリエイトコードの例:テキストリンク)
アフィリエイトコードの例:テキストリンク

画像 A8.net

▲ どのASPもそうですが、広告コードを出力すると上記のようなリンクタグ、IMGタグが含まれた形式で出力されます。IMGタグがあるのは計測が目的らしいです。

基本的には、広告コードは触らないほうがよいです。わからなければなおさら。ということで広告コードをそのまま貼り付けられるボタンがCocoonに存在します。

クラシックエディタの場合

バナーリンク

Cocoonアフィリエイトタグ・リンク貼り方(アフィリエイトコードの例:バナーリンク)
アフィリエイトコードの例:バナーリンク

画像 A8.net

▲ 上記のような広告コードをコピーします。

Cocoonアフィリエイトタグ・リンク貼り方(クラシックエディタを使ったHTMLコードの挿入方法)
クラシックエディタを使ったHTMLコードの挿入方法
Cocoonアフィリエイトタグ・リンク貼り方(クラシックエディタを使ったHTMLコードの挿入方法)

テキストリンク

Cocoonアフィリエイトタグ・リンク貼り方(クラシックエディタを使ったテキストリンクの作り方)
クラシックエディタを使ったテキストリンクの作り方

▲ テキストリンクの場合でURL挿入のみであれば、いつもリンクを張っている要領でOKです。

また、バナーリンクと同様に、リンクタグ、IMGタグが一緒の場合はバナーリンクと同じ要領でリンク挿入すればOKです。

ボタンリンク(通常タイプ)

Cocoonアフィリエイトタグ・リンク貼り方(クラシックエディタを使ったボタンの作り方)
クラシックエディタを使ったボタンの作り方

テキストは先にいれても、ボタンを作ってから入れても大丈夫です。その後に、URLをリンク挿入します。

ボタンリンク(囲みボタン)

ボタンリンクはテキストリンクの応用です。

Cocoonアフィリエイトタグ・リンク貼り方(テキストの広告コードをコピーする)
テキストの広告コードをコピーする

画像 A8.net

▲ まず、上記のようなタグから広告コードをコピーします。

<a href="https://px.a8.net/svt/xxxxxxxxxxxxxx" target="_blank" rel="nofollow">ここの文字は変更しても大丈夫</a><img width="1" height="1" src="https://www11.a8.net/0.gif?a8mat=xxxxxxxxxxxxxx" alt="">

▲ リンクで表示される文字は変更しても大丈夫です。

Cocoonアフィリエイトタグ・リンク貼り方(クラシックエディタを使った囲みボタンの使い方)
クラシックエディタを使った囲みボタンの使い方

▲ これで広告コードを全く改変せずにボタンリンクを作ることができました。私も最初、この囲みボタンに気づかず広告コードを使ったボタンの作り方がわからず悩んでいました。

ブロックエディタの場合

バナーリンク

Cocoonアフィリエイトタグ・リンク貼り方(バリューコマースのバナーリンクの例)
バリューコマースのバナーリンクの例

画像 バリューコマース

▲ 上記のような広告コードをコピーします。

Cocoonアフィリエイトタグ・リンク貼り方(カスタムHTMLで広告コードを挿入する)
カスタムHTMLで広告コードを挿入する

画像 バリューコマース

▲ ブロックエディタの場合、「ブロックの追加」→「カスタムHTML」でASPのコードを挿入します。クラシックエディタと違い、画像表示はされません。

編集ブロックが上下ブロックと分離されているので、何らかの理由で広告を消したり、入れ替えたりするときはブロックエディタの方が楽になりました。クラシックエディタの場合は、余計なコードが残らないように、ソース編集していました。

テキストリンク

Cocoonアフィリエイトタグ・リンク貼り方(バリューコマースのテキストリンクの例)
バリューコマースのテキストリンクの例

画像 バリューコマース

▲ 上記のような広告コードをコピーします。「自由テキスト」となっている文字列は好みのものに変更してもらっても大丈夫です。

Cocoonアフィリエイトタグ・リンク貼り方(ブロックエディタだと簡単にテキストリンクが作れる)
ブロックエディタだと簡単にテキストリンクが作れる

▲ 何が起きているのかわかりづらいですが、テキストの場合はブロックエディタの編集画面上にコードをペーストするだけです。超簡単。

ボタンリンク(通常タイプ)

ASPのコードを使う場合、単純なリンク挿入はあまりないかと思います。海外プログラムをアフィリエイトする場合に、「https://test.com/?何らかの認識コード」といったURLを挿入することがあります。

KKdayとかそうですね。

Cocoonアフィリエイトタグ・リンク貼り方(Cocoonのボタンを呼び出す)
Cocoonのボタンを呼び出す

▲ ブロックエディタからボタンを呼び出します。標準より使えるオプションが多いのでCocoonブロックのものを使いましょう。

Cocoonアフィリエイトタグ・リンク貼り方(ボタン文字列を入れる)
ボタン文字列を入れる

▲ まず任意の文字列を挿入します。

Cocoonアフィリエイトタグ・リンク貼り方(URLを入れてボタン完成)
URLを入れてボタン完成

次にURLを入れれば、ボタンは完成です。後の設定はオプションになるので必要に応じて行えば良いでしょう。

  • リンクの開き方
    • 現在のタブで開く
    • 新しいタブで開く
  • サイズ(大・中・小)
  • 円形にする
  • 光らせる

Cocoonアフィリエイトタグ・リンク貼り方(ボタンの大きさ、大・中・小)
ボタンの大きさ、大・中・小
Cocoonアフィリエイトタグ・リンク貼り方(ボタン丸みありとなし)
ボタン丸みありとなし
Cocoonアフィリエイトタグ・リンク貼り方(ボタンの色も様々)
ボタンの色も様々

▲ アフィンガーテーマあたりで流行って光らせるボタンがCocoonにも導入されました。光る効果についての詳細な検証を誰かやって(笑

ボタンリンク(囲みボタン)

ASPの紹介でボタンリンクを作る場合、通常囲みボタンを使います。

Cocoonアフィリエイトタグ・リンク貼り方(ASPテキストリンクの広告コードを取得する)
ASPテキストリンクの広告コードを取得する

画像 バリューコマース

▲ まず、ASPのテキストリンクの広告コードを取得します。

Cocoonアフィリエイトタグ・リンク貼り方(囲みボタンを使ったボタンリンクの作り方)
囲みボタンを使ったボタンリンクの作り方

▲ 囲みボタンの右側にある設定箇所より「リンクタグ・ショートコード」の一覧にASPコードを挿入します。この後は通常ボタンの設定同様にオプションで好みに仕上げます。

便利なTips

アフィリエイトタグで簡単入力

Cocoonには、なんども使う広告コードを管理するための画面があります。「Cocoon設定」→「アフィリエイトタグ管理」から入ることができます。HTMLのタグをそのまま保存します。

Cocoonアフィリエイトタグ・リンク貼り方(Cocoonのアフィリエイトタグ管理)
Cocoonのアフィリエイトタグ管理

名前つけて広告コードを入れるだけです。

[affi id=1]

▲ こんな感じのショートコードを本文内に入れると広告が出力されます。

こんなタグ覚えられないよ、という方大丈夫です。クラシックエディタでもブロックエディタでもアフィリエイトタグ管理画面から登録した名称でタグを探すことができます。

Cocoonアフィリエイトタグ・リンク貼り方(クラシックエディタを使ったアフィリエイトタグ呼び出し)
クラシックエディタを使ったアフィリエイトタグ呼び出し
Cocoonアフィリエイトタグ・リンク貼り方(ブロックエディタを使ったアフィリエイトタグ呼び出し)
ブロックエディタを使ったアフィリエイトタグ呼び出し

テンプレートでいつもの決まり文句

アフィリエイトタグ管理では、HTMLコードをそのまま入れます。Cocoonのテンプレート管理ではクラシックエディタを使って任意の文章とともに使いまわせる広告表現を保存できます。

「Cocoon設定」→「テンプレート」から入ることができます。

Cocoonアフィリエイトタグ・リンク貼り方(Cocoonのテンプレート管理)
Cocoonのテンプレート管理
[temp id=5]

▲ こんな感じのショートコードを本文内に入れると広告が出力されます。ちなみにこのテンプレートでリンクが押されたことはないです(苦笑

アフィリエイトタグ管理と同じですが、クラシックエディタやブロックエディタからテンプレート名称で呼び出すことができます。

Cocoonアフィリエイトタグ・リンク貼り方(クラシックエディタからのテンプレート呼び出し)
クラシックエディタからのテンプレート呼び出し
Cocoonアフィリエイトタグ・リンク貼り方(ブロックエディタからのテンプレート呼び出し)
ブロックエディタからのテンプレート呼び出し

マイクロコピーで一押し

マイクロコピーとは、ボタンの文字やフォームまわり、 エラーメッセージ、写真のキャプションなど、正直言ってこれまでコピーライティングの教材や、専門家が全く話さなかった、非常に細部の箇所のコピーのことです。

microcopy.org「マイクロコピーの基礎知識」

マイクロコピーを覚えてからきちんと統計は取っていないものの、自分が設置したリンクのクリック率は高まっているという実感がある。私は、ボタン周辺にもう一つリンクを置いたりとか工夫しています。

▲ ブロガー、アフィリエイター間で人気書籍、というか必読の一冊。マイクロコピーをさらっと勉強できます。ちなみに、コクーンの「Amazonの商品レビュー・口コミを見る」というリンクの貼り方もマイクロコピーです。ツイッター上で流行ったのを見て、わいひらさんが実装してくれました。

Smart-Cからアプリーチリンク

この記事なんで書き始めたかというとこれをメモしておきたかった。最近では、メモするついでに一つ記事が作れるようにまで成長しました。

よくあるアプリリンク。これどうやるの?って気になっている方もいるようで、紹介したアプリではなくクレジット表記に含まれるアプリーチのリンクもよく押されています。

Cocoonアフィリエイトタグ・リンク貼り方(アプリーチでアプリを検索)
アプリーチでアプリを検索

▲ 使い方は簡単で検索ボックスでアプリを探します。

Cocoonアフィリエイトタグ・リンク貼り方(アプリーチのオプション設定)
アプリーチのオプション設定

▲ 表示オプションを好みで変更します。私はほぼ触らないですね。(アプリーチを使う場合、クレジット表記を残しておく必要があります

Cocoonアフィリエイトタグ・リンク貼り方(アプリーチで生成されるHTMLコード)
アプリーチで生成されるHTMLコード

▲ 出てきたコードをコピーします。あとはエディタでコードをそのまま使います。

とここまでは基本的なアプリーチの使い方です。アプリーチではASPの広告コードを入れることができます。私の場合、Smart-C というASPでブログ内で紹介したいアプリがある場合に使います。アプリダウンロードで収益が発生できるものがあるので使っています。

そう、ダウンロードだから…

成果地点がゆるい

登録は簡単ですが、審査があります。多少記事を投入してからの提携依頼が良いと思います。

Cocoonアフィリエイトタグ・リンク貼り方(Smart-Cの広告コード例)
Smart-Cの広告コード例

画像 Smart-C

▲ Smart-Cを使える準備ができたら、対象広告を選んで広告コードを取得します。AリンクタグのところにあるURLをコピーします。

Cocoonアフィリエイトタグ・リンク貼り方(アプリーチで任意のURLに変更できる)
アプリーチで任意のURLに変更できる

▲ アプリーチに任意のURLを含む形でブログパーツを生成できます。iPhoneやAndroidのところにURLを入れるとリンク先を変更できます。

まとめ

Cocoonアフィリエイトタグの貼り方を記事にしてみました。最初、私も覚えるまで大変でした。これ以外にもASP各社の画面に慣れる必要もあります。一つずつ覚えていきたいですね。

Cocoon(コクーン)
スポンサーリンク
ご覧いただき感謝です。記事の品質がブースト的に向上するボタンは次の通りです。
スポンサーリンク
スポンサーリンク
cocoon-affiliate-tag-bannerblog-icon-banner
バジェットな旅行記ロク
タイトルとURLをコピーしました