ペイウォールの見た目や挙動をかえることができる、貼付けタグの属性について説明します。
貼付けタグについては大きく2種類あり、1つはcodocのスクリプトタグ、もうひとつは記事やサブスクリプションウィジェット等のcodocタグ(divタグ)となります。スクリプトタグは基本的にページ内のheadタグの中に1つだけ指定するものとなっています。codocタグはペイウォールを表示させたい場所等に張付けを行います。
属性については以下の要領で追加してください。(data-XXXX-YYYY=”値”)
//スクリプトタグ
codoc貼付けタグへの属性追加サンプル
<script src=’https://codoc.jp/js/cms.js data-usercode=”t0Fx1DCJdA” data-XXXX-YYYY=”値” defer></script>
//codocタグ(記事のタグ)
<div class=”codoc-entries” id=”codoc-entry-By1QWAl36Q” data-XXXX-YYYY=”値”></div></div>
スクリプトタグの属性
属性 | 用途 | パラメーター |
data-lang | 言語指定 | ja: 日本語, en: 英語 |
data-css | テーマ名・パス | blue,red,green,black,dark,blue-square,red-square,green-square,black-square,dark-square,CSSのパス指定 |
data-usercode | codocユーザーコード | ユーザーコードを指定(必須) |
data-connect-code | 外部連携コード | 外部連携コード(外部連携機能を利用する場合は必要| cms.js → cms-connect.js に変更必須) |
data-connect-registration-mode | 登録モード | dedicatedを指定した場合専用ユーザーモードに(要利用申請) |
data-callback-json | 任意のタイミングで実効するjavascript関数をjsonで指定 | { “init” : “”, “ready” : “”, “loggedIn” : “”, “afterGettingPaywall” : “”, “afterPassingPaywall” : “”} |
codocタグ(記事のタグ)の属性
属性 | 用途 | パラメーター |
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-copyright | Powered By等 が表示されてる箇所を非表示 | 1:表示 0:表示しない ※この属性はcodoc pro のみ利用可能です |
data-show-about-codoc | helpアイコンを非表示にする | 1:表示 0:表示しない ※この属性はcodoc pro のみ利用可能です |
data-show-powered-by | Powered By codocを表示する | 1:表示 0:表示しない ※この属性はcodoc pro のみ利用可能です |
data-show-created-by | Created By を非表示にする | 1:表示 0:表示しない ※この属性はcodoc pro のみ利用可能です |
data-show-pay-without-account-button | 会員登録しないで購入ボタンを表示 | 1:表示する 0:表示しない |
data-show-subscription-message | サブスクリプションの説明を表示 | 1:表示する 0:表示しない |
data-show-about-codoc | codocについてを表示する | 1:表示 0:表示しない |
data-script-after-getting-paywall | 無料部分ロード時に実行するjavascript | javascript実装をそのまま記述 注意:廃止予定のため以下を利用してください <script data-callback-json='{ afterGettingPaywall”: “globalFunctionName” }’> |
data-script-after-passing-paywall | 有料部分ロード時に実行するjavascript | javascript実装をそのまま記述 注意:廃止予定のため以下を利用してください <script data-callback-json='{ afterPassingPaywall”: “globalFunctionName” }’> |
data-paid-area-continue-text | 有料部分表示時の続きを読むテキスト | 任意のテキストを指定 |
data-show-paid-area-continue-text | 有料部分表示時の続きを読むテキスト | 1:常に表示する 0:初回のみ表示 |
data-paywall-url | 購入後に戻ってくるURL | 任意のURLを指定。デフォルトは window.location.href |
data-logout-url | ログアウト時に遷移するURL | 任意のURLを指定。デフォルトは window.reloadの挙動。reset を指定することで画面遷移しないでログアウト可能。 |
data-subscription-message-url | サブスクリプション説明のURL | 任意のURLを指定。デフォルトはサイト内の当該サブスクリプションページ。 |
data-session-window | ログインや購入時の画面遷移 | open: 別ウィンドウ href: 同一ウィンドウ(デフォルト) |
data-scroll-to-body-after | ログイン・購入後に続きを読むまでスクロールする | 1:する(デフォルト) 0: しない |
data-alt-auth | 代替認証 | 1:する 0:しない(デフォルト) |
data-alt-auth-key | 代替認証用のキー | アカウント画面で指定した代替認証ロジックで生成したハッシュ値 |
data-alt-auth-time | 代替認証用のUNIXTIME | 代替認証用のキーを生成したUNIXTIME |
data-alt-auth-key-api-url | 代替認証のキーを生成するためのURL | キーとUNIXTIMEをタグで指定しない場合に以下のjsonを出力するURLを指定。 { “key”: $key, “time”: $time } |
data-alt-auth-login-url | 代替認証時に変更可能なログインURL | 任意のURL |
data-alt-auth- paywall-url-query-name | 代替認証用ログインURLの戻りURLパラメーター名 | 任意の名前 デフォルトは paywall_url |
WordPressプラグイン利用してる場合の属性追加
記事タグの属性についてはプラグインを利用してる場合、一律で指定することができます。
設定→ codoc → 「codocタグの属性」で指定したい属性を入力し、設定を保存してください。
まとめ
以上がcodocの貼付けタグで利用できる属性一覧となります。機能追加などあれば本記事にて更新していきます。ご質問がある方は当社サポートまでお問い合わせください。