codocの貼付けタグで使える属性

ペイウォールの見た目や挙動をかえることができる、貼付けタグの属性について説明します。

貼付けタグについては大きく2種類あり、1つはcodocのスクリプトタグ、もうひとつは記事やサブスクリプションウィジェット等のcodocタグ(divタグ)となります。スクリプトタグは基本的にページ内のheadタグの中に1つだけ指定するものとなっています。codocタグはペイウォールを表示させたい場所等に張付けを行います。

属性については以下の要領で追加してください。(data-XXXX-YYYY=”値”)

//スクリプトタグ
<script src=’https://codoc.jp/js/cms.js data-usercode=”t0Fx1DCJdA” data-XXXX-YYYY=”値” defer></script>

//記事タグ
<div class=”codoc-entries” id=”codoc-entry-By1QWAl36Q” data-XXXX-YYYY=”値”></div></div>

codoc貼付けタグへの属性追加サンプル

スクリプトタグの属性

属性用途パラメーター
data-lang言語指定ja: 日本語, en: 英語
data-cssテーマ名・パスblue,red,green,black,dark,blue-square,red-square,green-square,black-square,dark-square,CSSのパス指定
data-usercodecodocユーザーコードユーザーコードを指定(必須)
data-connect-code外部連携コード外部連携コード(外部連携機能を利用する場合は必要| cms.js → cms-connect.js に変更必須)
data-connect-registration-mode登録モードdedicatedを指定した場合専用ユーザーモードに(要利用申請)
スクリプトタグで利用できる属性

記事タグの属性

属性用途パラメーター
data-entry-code記事コード記事コード(必須)
data-without-body本文(無料部分)を表示しない1: 表示しない
data-disable-scriptスクリプトを動作させないall: すべて不許可, または正規表現(^https\:\/\/(www\.instagram\.com|platform\.t
witter\.com))
data-support-messageサポート説明任意のテキストを指定
data-thanks-entry-message記事購入時のサンクスメッセージ任意のテキストを指定
data-thanks-subscription-messageサブスク購入時のサンクスメッセージ任意のテキストを指定
data-thanks-support-messageサポーと購入時のサンクスメッセージ任意のテキストを指定
data-subscription-messageサブスクリプションの説明任意のテキストを指定
data-login-button-textログインボタンテキスト任意のテキストを指定
data-entry-button-tex記事購入ボタンテキスト任意のテキストを指定
data-subscription-button-textサブスク購入ボタンテキスト任意のテキストを指定
data-support-button-textサポーと購入ボタンテキスト任意のテキストを指定
data-move-to-order-button-textモーダル内の決済ボタンテキスト任意のテキストを指定
data-support-price-button-textモーダル内のサポート価格ボタンテキスト任意のテキストを指定
data-support-modal-header-textモーダル内の〇〇さんをサポートのテキスト任意のテキストを指定
data-show-likeいいねを表示する1:表示 0:表示しない
data-show-powered-byPowered By codocを表示する1:表示 0:表示しない
data-show-pay-without-account-buttonアカウント無しで購入ボタンを表示しない1:表示 0:表示しない
data-show-about-codoccodocについてを表示する1:表示 0:表示しない
data-script-after-getting-paywall無料部分ロード時に実行するjavascriptjavascript実装をそのまま記述
data-script-after-passing-paywall有料部分ロード時に実行するjavascriptjavascript実装をそのまま記述
記事タグで利用できる属性

まとめ

以上がcodocの貼付けタグで利用できる属性一覧となります。機能追加などあれば本記事にて更新していきます。ご質問がある方は当社サポートまでお問い合わせください。

外部サービス連携とは

codocと導入先サイト間で機能連携ができる、外部サービス連携ついて説明します。

これは何?

codocを利用しているサービス・クリエイターと、コンテンツ購入者にとって最適化された管理画面やコンテンツ管理方法を提供する機能です。 クリエイターがこれを有効にした場合、購入者の管理画面において購入・購読画面において当該クリエイターの商品のみ表示されるようになったり、管理画面や購入メールに利用されるロゴをクリエイターのものに変更するといったことが可能です。 また、クリエイターのサイト内でcodocのログイン状態を表示するウィジェットやcodoc管理画面に存在する購入・購読画面の機能もサービス連携時にウィジェット化され利用することができます。

どのようなケースで使うか?

  • 購入者が利用するcodoc管理画面のデザインを替えたい
    • 管理画面や決済画面のロゴや、色味をカスタマイズできます
  • サイト内でcodocのログインボタンを設置したい
    • codocにログインするためのボタンを設置できます
  • サイト内で購入履歴閲覧やサブスクの管理を行いたい
    • codoc管理画面内にある機能をサイト内で提供可能です

どうやって使うか?

アカウント設定画面よりこの機能を有効にできます。有効にした後はプロフィール設定画面に移動し許可URLを必ず指定してください。許可URLは設置先のURLとなります。個別のページではなく、TOPページにあたるものをご指定ください。この設定がおこなわれないと機能動作がしないためご注意願います。

アカウント設定画面
アカウント設定画面
プロフィール設定画面

以上でベースとなる設定は完了です。

購入者向け管理画面のデザイン

デザイン変更はプロフィール画面より実施してください。ロゴについては推奨となるサイズにてアップロードをおこなうだけです。管理画面CSSにはテーマ色を選べるようになっており、カスタム選択時においては各所の色指定をカラーピッカーにて指定可能です。

カスタマイズされた購入者向け管理画面

サービス連携ウィジェットの設置

サイト内にログインボタンや、購入履歴の表示機能を導入するには外部サービス連携時に利用できる専用ウィジェットの貼付けをおこなうだけで完了します。ウィジェットは管理画面内のウィジェット→サービス連携から取得できます。

ただし、これらのウィジェットはcodocのスクリプトタグを改変しないと利用できない仕様となっています。

  1. cms.js のスクリプトファイル名を cms-connect.js に変更
  2. data-connect-code=”サービス連携コード”を追加(サービス連携コードはアカウント画面で取得できます。)

となります。

<script src=”https://codoc.jp/js/cms.js”>

変更後

<script src=”https://codoc.jp/js/cms-connect.js” data-connect-code=”サービス連携コード”>

変更後

これらは手動で変更することでも問題ありませんが、codoc管理画面内のウィジェット→サービス連携画面で表示されるJavascriptタグをコピーし、従来あったものと置き換えることでも可能です。

WordPressプラグインをご利用の場合はスクリプトタグの変更は行わず、WP管理画面の設定→codocより、クリエイター情報の更新をするをクリックし、変更を保存してください。以下のように、「外部サービス連携済」と表示されれば完了です。

更新前
更新後

上記の設定が完了したあとは外部連携のウィジェットをサイト内の適切な位置に貼り付けます。

ログインウィジェット

購入ウィジェット

ログイン中の場合、購入履歴が表示されます

サブスクリプションウィジェット

ログイン中の場合、契約中の月額・年額サブスクリプションが表示されます。

codoc→サイトへの遷移時に変更点があります

初回(ログイン・購入時含む)と、2回目からの遷移時において以下のような確認が入るようになります。

初回
二回目以降

途中から有効にできるか?

運用中であっても、有効にできますし、無効にもすることも可能です。ただし、以前より購入しているユーザーについては一律で有効になることはありません。再度コンテンツ購入や、アクセスがあった段階で初回の連携確認が済んだ段階で機能が有効になります。

まとめ

外部サービス連携について説明をおこないました。上述のとおり、サイトのデザインをcodoc側へある程度反映することや、サイト内にて購入履歴を表示できるようなります。ユーザーは通常の販売方法と比較し、より違和感なくコンテンツを購入・管理できることができると思います。

外部コンテンツ(HTML)とは

記事編集画面で利用できる外部コンテンツ(HTML)について説明します。

まず、外部コンテンツについてですが、「ペイウォール外にあるコンテンツへ認証を引き継ぐ」ための機能です。2021年6月現在はHTMLとMatterportの2種類の外部コンテンツがサポートされています。

これは何?

この機能を使うと、ページ全体や特定箇所に対しペイウォールでの認証を利用したコンテンツ保護が行えます。認証をおこないたいHTML内で外部コンテンツ(HTML)のタグを貼り付けてください。

いつ使うか?

運営するサイト内にて特定ページを有料化したい場合にご利用いただけます。codocのペイウォールではJavascript等の動作やサイトレイアウトに支障が出る、コンテンツの管理をサイト内にとどめたい場合等の課題に対応できます。

どうやって使うか?

外部コンテンツは記事の新規投稿時には登録できないため、いったん下書きにした後、編集画面より以下の作業をおこなってください。

  1. 有料化したいHTMLを用意します。
  2. 記事の価格を指定します。単体ではなくサブスク販売にする場合は適宜サブスクリプションを指定します。
  3. 外部コンテンツの登録をおこないます。コンテンツタイプはHTMLとし、適宜ラベルを指定し、HTMLに適当な文字列をいれて登録(URLとHTMLについては後述します)。
  4. 一覧に指定したラベル名で表示されるので登録した外部コンテンツ(HTML)のタグを取得します。
  5. 取得したタグを有料化したいHTMLに貼り付けます。

タグのコピーボタンから以下のようなタグがコピーバッファーにはいるので適宜作成したHTMLに貼り付けてください。

<html>
<head>
<title>サンプル</title>
<!– codocのスクリプトタグ –>
<script src=”https://codoc.jp/js/cms.js” data-usercode=”” charset=”UTF-8″ defer”>
</head>
<body>
<div>hello world!</div>
<!– 外部コンテンツのタグ –>
<div id=”codoc-element-記事コード” class=”codoc-elements” data-auth-mode=”modal” data-auth-redirect-url=”” data-external-content-code=”外部コンテンツ毎にランダムな文字列”>
</body>
</html>

test.html

上記のように外部コンテンツ(HTML)タグを含んだHTMLを作成し、アクセスすると以下のようにペイウォールの購入フォームがモーダルで表示されます。このタグを貼らない場合はモーダルは表示される「hello world!」という出力がおこなわれます。アクセスしたユーザーはコンテンツの購入を行わないと本来表示される内容が閲覧できない仕組みが実現できます。

購入前
購入後

外部コンテンツ(HTML)によって保護されるコンテンツ内容について注意することがあります。張付け先のHTMLの内容についてユーザーインターフェース上、閲覧をすることは困難ですが、ブラウザのソース閲覧機能などをつかった場合、ペイウォールを介さないで内容が把握できてしまいます。このため、確実に保護したいコンテンツについては外部コンテンツで指定できるHTML、もしくはURL内に配置するようにします。上記、購入後のスクリーンショットでは「認証成功時に出るテキスト」という内容が表示されています。これは管理画面で指定した内容で、外部コンテンツのタグの位置に置き換わって表示される仕様となっています。当然ながらこの部分は動的に出力されるもののため、ブラウザのソース閲覧では確認できないものとなります。外部コンテンツ(HTML)の設定画面ではタグと置き換わるコンテンツの指定方法として前述で利用した「HTML」の他に「URL」があります。

上記の設定をおこなうと、購入時にURIで指定されたHTMLファイルを取得し、タグがその内容と置き換わります。上記の場合は相対パス指定となるため、設置するHTMLとおなじディレクトリ上に「test.content.html」というファイル名でHTMLを設置してください。ファイルの内容を「test.content.html 内に記述したテキスト」とし、有料化したいページ上で認証をおこなうと以下のように表示されます。

認証前は別ページに遷移させる

外部コンテンツ(HTML)では購入前にページへアクセスした場合、別ページに遷移させることも可能です。

貼付けタグの取得時にモーダルではなく、「リダイレクト」でタグを取得します。モーダルと違うのは“data-auth-mode”属性が”redirect”と指定されるだけですのでご自身で属性を変更いただくことでも問題はありません。また、手動で指定する属性がもうひとつあります。“data-auth-redirect-url” に遷移先のURLを指定してください。遷移先のページではコンテンツを購入するためのペイウォールが必要なことから、記事一覧で取得できる当該記事のcodocタグを取得し貼付けをおこないます。

<div id=”codoc-element-記事毎にランダムな文字列” class=”codoc-elements” data-auth-mode=”redirect” data-auth-redirect-url=”authorize.html” data-external-content-code=”外部コンテンツ毎にランダムな文字列”>

<html>
<head>
<title>サンプル</title>
<!– codocのスクリプトタグ –>
<script src=”https://codoc.jp/js/cms.js” data-usercode=”” charset=”UTF-8″ defer”>
</head>
<body>
<div>コンテンツを閲覧するには購入をお願いします。</div>
<!– codocの記事タグ –>
<div id=”codoc-entry-記事ごとにランダムな文字列” class=”codoc-entries” data-show-pay-without-account-button=”0″>この続きはcodocで購読</div></body>
</html>

authorize.html

上記は遷移先を authorize.html とし、authorize.htmlにはcodocの記事のタグを組み込んで設置します。購入前に外部コンテンツで保護されたHTMLページにアクセスするとauthorize.htmlに遷移します。外部コンテンツ(HTML)を利用する場合、codocアカウントは必須となるため、data-show-pay-without-account-button=”0″を貼付けタグの属性に追加し、「アカウント登録しないで購入」ボタンを非表示としています。モーダルでは購入ページをカスタマイズが十分におこなえないため、より詳細に購入についての説明をしたい場合などはリダイレクトを利用することをお勧めします。

まとめ

今回は外部コンテンツ(HTML)について説明をしました。codocの有料記事情報をもとにペイウォールの外にあるコンテンツに対しての認証が可能になることがおわかりいただけたと思います。この機能を利用することによりcodocのCMSに依存しないでコンテンツ運用できることも場合によってはメリットとなるのではないでしょうか。サイト内でのコンテンツ販売時において本機能をご検討いただければ幸いです。

codocのコンテンツでアフィリエイトを行う

codocで販売するコンテンツに対しアフィリエイトプログラムを作成することが可能です。
コンテンツのアフィリエイトをおこなうためには記事設定でアフィリエイトを有効にしてある商品を購入しプログラムに参加してもらうか、クリエイターが他のcodocユーザーとアフィリエイト提携を直接おこなうかのいずれかになります。(メールアドレスを指定して提携)
codocユーザーはクリエイターが作成したコンテンツのアフィリエイトに参加すると、アフィリエイトリンクの取得ができるようになります。参加ユーザー(アフィリエイター)は同リンクをブログやTwitterでシェアし、そこから発生した売上金額から、クリエイターが指定した料率(5%〜50%まで)の金額を報酬として受け取ることができます。

アフィリエイト可能な記事を購入した場合

アフィリエイト可能な記事をつくるには記事投稿時にアフィリエイトを有効にし、料率を指定してください。

WordPressから投稿(ブロックエディタの場合はcodocのブロック設定・クラシックエディタではcodocボタンから設定)

codocから投稿(記事投稿フォーム内のアフィリエイト設定)

アフィリエイトは記事単体販売の他、サブスクリプション販売に対しても有効にすることが可能です。サブスクリプションに対してアフィリエイトを有効にしたい場合はサブスクリプション設定で同様のアフィリエイト項目があるので有効にした上で料率を指定してください。初回購入時のみ報酬対象となります。

記事・サブスクリプションを購入したユーザーはcodoc管理画面内の「アフィリエイト」より、参加中タブをクリックし、新規参加ボタンより購入したコンテンツのアフィリエイトへ参加できます。

アフィリエイトへの参加完了後、以下のボタンよりアフィリエイトリンクが取得できます。

codocユーザーと直接アフィリエイト提携した場合

商品購入を行わずにアフィリエイトをおこなう場合はcodocユーザーと直接提携を行います。提携には提携先となるユーザーがcodocに登録しているメールアドレスが必要です。
codoc管理画面内の「アフィリエイト」より提携中タブをクリックし、直接提携のための設定を行います。

直接提携をおこなうと提携中一覧に提携したコンテンツが表示されます。(購入ユーザーより提携がおこなわれた場合もここに一覧されます)

アフィリエイト経由でコンテツが売れた場合

アフィリエイトリンクは提携したコンテンツに指定されたURLに遷移します。URLは記事設定で指定されたものとなり、未指定の場合はcodocサイト内の記事ページ、WordPressプラグイン経由で作成された記事の場合はWordPressで作成された記事のパーマリンクが遷移先になります。アフィリエイトリンクからコンテンツページに遷移後、30日間以内に商品の購入がおこなわれるとアフィリエイト報酬が発生する仕組みです。アフィリエイトの報酬についてはcodoc管理画面内の売上より確認が行なえます。

まとめ

codocで販売するコンテンツでアフィリエイトを有効にすることにより、購入ユーザーによるコンテンツのシェア率を高め売上につなげることができます。codocはサービス内に作成されるページでコンテンツ販売が行える他、ブログをお持ちの場合はタグのコピー&ペーストで、WordPressをお使いなら専用プラグインのインストールを行うことでご自身のサイト内でのコンテンツ販売をすぐに行なえます。
是非お試しください

WordPressプラグインで旧エディタに対応しました

codocのWordPressプラグインは新エディタ(ブロック形式・Gutenberg)に対応をおこなっておりましたが、先日公開したバージョンより旧エディタ(tinymce)にも対応をおこないましたのでお知らせします。

codocプラグインを有効にした状態で旧エディタを利用すると以下のようなボタンが追加されます。

ボタンをクリックするとcodocの設定がおこなえます。

codocの設定を完了し、設定完了ボタンを押すとテキストボックス内のカーソル位置にcodocタグが挿入されます。

点線を含む青い文字の表示のとおり、codocタグの上が無料部分、下が有料部分になります。もう一度codocボタンを押すことで価格などの設定を変更することも可能です。また、青い文字を移動することにより無料・有料部分の位置変更もおこなえます。

その他、旧エディタでのcodocプラグインご利用にあたって推奨されるプラグインと設定※がございますのでお知らせします。
※旧エディタ利用時に一般的に推奨されているものとなるためインストール・設定済のケースもございます

  • TinyMCE Advanced プラグインをインストールします。
  • TinyMCE AdvanceのClassicEditor設定で、「keep paragraph tags in the Classic block and the Classic Editor」(段落タグの保持)を有効にしてください。

すでにWordPressプラグインをお使いになられている方(バージョン0.7以下)におかれましてはアップデートをおこなうと以下の現象が発生しますのでご注意ください。

  • codocブロックで「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されます

0.7以下で投稿したブロックは0.8以降のものと形式が異なるためこの表示が出ます。
そのまま編集を続行しても問題はございませんが、codocの価格設定などをおこないたい場合は、ブロック内の右上の設定ボタンより「ブロックのリカバリーを施行」を実施してください。
実施後、codocの設定がおこなえます。

今回のお知らせは以上となります。本件に関して不具合やご意見がございましたらお気軽にお問い合わせよりご連絡ください。

WordPress向けの新しいプラグイン

WordPressの新しいcodocプラグインをご紹介します。今までのプラグインはcodocへ記事の登録が必要でしたが今後はWordPressだけで記事の登録・編集がおこなえるようになります。

プラグインはWordPressのブロックエディタ上で動作し、具体的には投稿画面内で販売をおこなう記事の価格やサブスクリプションの指定を行えるインターフェースを提供します。

WordPressのプラグインについてはご存じないかたもいらっしゃるかもしれませんが、インストールすることでWordPressへ色々な機能を追加することが可能です。たとえばメールフォームを追加するといった簡単なものから、ECサイトを構築するための機能を提供するといった大規模なものがあります。codocプラグインでは投稿画面において上記のような記事販売をおこなう機能を追加するものとなっています。

利用を開始するにはプラグインのインストールが必要です。管理画面のプラグインの新規追加から”codoc”で検索をすると表示されるので”インストール”と”有効化”をおこないます。

インストールのあと有効化をするとプラグイン一覧画面に遷移します。画面内に codocの”設定”リンクがあるので、そこからcodoc設定に遷移します。codoc設定は左メニュー内、設定→codocからも遷移できます。冒頭に説明したcodocブロックはWordPressとcodocで連携が必要なので、認証という作業をおこなう必要がありますが、ボタンを押すだけでOKです。codocにアカウントがある場合は”ログインして認証”ボタンを押してください。ない場合は”登録して認証”となります。

いずれもボタンをおすと、codocのログイン画面や登録画面に遷移しますが最終的には”ブログ連携”画面に遷移します。

”認証する”ボタンを押すと、WordPressのcodoc設定に戻り、「codocに登録しているメールアドレスで認証済」と表示されれていれば初期設定完了です!

次に、有料記事の投稿をしてみます。早速、codocブロックの追加をおこなってみましょう。ブロックエディタ上にある、+マークからから、”codoc”と検索を行えばcodocブロックが出てきますので追加を行います。

追加をおこなった状態は以下のような状態です。編集できる箇所は2箇所あります。”この続きをみるには”の部分とブロック設定エリアです。最初の文言については課金前に表示される文言でお好きなものに変更が可能です。2つ目のブロック設定エリアでは販売価格や、サブスクリプションの設定等、codoc上で利用できる販売オプションの指定がおこなえるようになっています。codocオプションは1記事あたり1つのみ追加が可能です。 

 

冒頭でも説明しましたが、閲覧に課金が必要なエリアはこのcodocブロックの上下で決まります。以下のように無料パート、有料パートで書いてみます。

これで公開をおこなってみます。ここでプレビューをおこなうことも可能ですがその場合は無料・有料パートが全て表示された状態となります。公開をすると以下のように有料パートがペイウォールとして表示されるようになります。

記事の価格やサブスクリプションを指定したい場合は編集画面で再度codocブロックを追加し、修正を行うことができます。以下では価格の変更、サブスクリプションの指定、サポートの有効化の他、アイキャッチ画像の指定をおこなっています。アイキャッチ画像についてはWordPress側の記事と連動するようになっているため、ブロックエディタ上の文書設定で指定をした画像がcodocでも利用される仕組みになっています。

記事データについてはWordPress、codoc双方に同じ内容が保存されるようになっています。また、削除をおこなった場合はcodoc側の記事を非公開にする仕様です。

いかがでしたでしょうか?今回はWordPess向けの新codocプラグインについて説明をさせていただきました。これまで、codocタグをコピーすることでも利用はできましたが、このプラグインを利用いただければより簡単に記事の販売ができるようなりますね!それでは今後ともcodocをよろしくおねがいします。