サイトにコードスニペットを追加する

パブリケーションに Reader Revenue Manager を起動するには、サイト上の各ページにパブリッシャーセンターのコードスニペットを設定する必要があります。このスニペットは、Reader Revenue Manager のプロンプトをサイトに読み込みます。

スニペットをインストールするには、コンテンツ管理システム（CMS）でサイトのテーマまたはテンプレートのコードにアクセスし、編集する権限が必要です。

サイトにコードスニペットを追加する

Google パブリッシャーセンターにアクセスします。
パブリケーションで使用している Google アカウントでログインします。
[Reader Revenue Manager] をクリックします。
[サイトにコードスニペットを追加] をクリックします。
設定が完了してもコードスニペットを追加していない場合は、CMS Sync からアクセスできます。スニペットには、次の 2 種類があります。
- アクセススニペットを開きます。
  - 次の各対象で使用します。
    - ペイウォールを設定する場合にすべての読者に公開すべき記事
    - 寄付またはアンケートを設定した場合のすべての記事
- 商品 ID スニペット
  - ペイウォールを設定するページで、使用する商品 ID を含むコードスニペットをコピーします。
  - コンテンツタイプごとに異なる価格を設定するには、商品 ID を使用します。たとえば、ニュースコンテンツとスポーツコンテンツの定期購入を販売しようとしている場合は、2 つの個別の商品 ID を作成して個別のコードスニペットを配置します。スポーツの定期購入に関連付けられているコードスニペットが、スポーツページに追加されます。ニュースの定期購入に関連付けられているコードスニペットが、ニュースページに追加されます。
スニペットを各ページの <head> タグに追加します。
Reader Revenue Manager が正しく読み込まれるようにするには、ウェブサイトに移動します。

ヒント:

新しい商品 ID を使用して料金を更新した場合は、ウェブサイトで CMS 同期を更新する必要があります。
1 つのサイトで複数のプランを有効にしている場合、複数のスニペットを設定して、関連するコンテンツページに各スニペットを追加する必要があります。1 ページにつき 1 つのスニペット:
- 商品 ID ごとに 1 つのスニペットを構成します。
- 以下の商品 ID を含めます。
  - 関連ページ
  - CMS 内のテンプレート

用語集

項目

clientOptions

clientOptions 属性は、テーマと言語を指定できるオブジェクトを受け入れます。言語の値を指定しない場合は、パブリッシャーセンターの設定がデフォルトで使用されます。この属性の言語コードは ISO 639-1 形式に従います。

テーマの場合: 「ライト」または「ダーク」を指定します。
lang の場合: 言語コードを指定します（「en」など）。

例: {theme: 'dark', lang: 'en'}

isPartOfProductID

ページに構成する料金プランを指定するには、isPartofProductID 属性を使用します。この属性は、<PUBLICATION_ID>:<PRODUCT_ID> の構文に従います。プロダクト ID は Google パブリッシャーセンターで確認できます。

スニペットがページに正しく読み込まれるようにするには、料金プランを「live」に設定してください。

isPartOfType

isPartOfType 属性は文字列の配列を受け入れます。コードスニペットをコピーした場合、この属性のデフォルト値は ["Product"] に設定されます。

タイプ

タイププロパティは、構造化データのマークアップスキーマに即している必要があります。ニュースパブリケーションには NewsArticle を使用します。詳細については Schema.org をご覧ください。

サンプルコード

JavaScript

<script async type="application/javascript"

src="https://news.google.com/swg/js/v1/swg-basic.js"></script>

<script>

(self.SWG_BASIC = self.SWG_BASIC || []).push( basicContributions => {

basicContributions.init({

type: "NewsArticle",

isPartOfType: ["Product"],

isPartOfProductId: "<PUBLICATION_ID>:<PRODUCT_ID>",

alwaysShow: true,

clientOptions: { theme: "light", lang: "en" },

});

</script>

サイトにコード スニペットを追加する