Publisher JavaScript Plugin
フロントエンドのみの変更で、求人サイトまたはパブリッシャーサイトに Indeed の機能を連携します。
Publisher JavaScript Pluginによって、フロントエンドの変更のみで、 求人検索機能を貴社の求人サイトやメディアサイトに連携できるようになります。
サポートされている機能
このプラグインは 求人検索機能 をサポートしており、Indeed および Indeed PLUS の求人サイトに掲載された求人を自社サイトに表示します。
求人検索機能を利用すると、指定したクエリに基づく求人のリストを貴社サイトで求職者が閲覧できるようになります。 各求人には固有の求人カードがあり、求人に関する情報や Indeed の求人へのリンクが記載されています。
Indeed は、Indeed PLUSの全求人のプールから、貴社のサイトで表示できる一部の求人を提供します。 詳細については、Indeed の担当者にお問い合わせください。
ブラウザサポート
すべてのプラグイン UI は HTTPS ページで表示します。HTTP はサポートされていません。
このプラグインは次のブラウザをサポートしています。
| Chrome | Firefox | Safari | Edge (Chromium) | |
|---|---|---|---|---|
| Linux | ✅ | ✅ | N/A | ✅ |
| macOS | ✅ | ✅ | ✅ | ✅ |
| Windows | ✅ | ✅ | N/A | ✅ |
| Android | ✅ | ❌ | N/A | ❌ |
| iOS | ✅ | ❌ | ✅ | ❌ |
始める前に
プラグインを使用するには、Indeed パートナーになり、Indeed 担当者に連絡してアクセス権を取得します。
プラグインスクリプトを読み込む
プラグインをサイトに読み込むには、プラグイン UI を表示するページに <script> タグを追加します。
<!DOCTYPE html><html> <head> ... // Load the plugin script <script src="https://plugins.indeed.com/publisher-plugin/main.js" crossorigin defer ></script> ... </head> ...</html>次に、求人検索機能を有効にします。
プラグインをテストする
セットアップ時に、プラグインを連携するサイトのドメイン名を Indeed に共有します。
本番環境とテスト環境の両方についてドメイン名を指定できます。
プラグインがテストドメインで読み込まれると、テストモードで動作します。テストモードは本番モードと同様に動作しますが、View job ボタンは無効になります。
求人検索を有効にする
求人検索機能を有効にするには、プラグインスクリプトを読み込み、UI を表示するために必要な属性を持つ HTML 要素を追加します。
次の例は、求人検索 UI を表示します。
<!DOCTYPE html><html> <head> ... // Step 1: Load the plugin script <script src="https://plugins.indeed.com/publisher-plugin/main.js" crossorigin defer ></script> ... </head> <body> ... // Step 2: Specify where to display the job search UI <div data-indeed-plugin-type="<PLUGIN-TYPE>" data-indeed-partner-app-id="<PARTNER-APP-ID>" data-indeed-placement-id="<PLACEMENT-ID>" data-indeed-search-limit="<SEARCH-LIMIT>" data-indeed-search-what="<SEARCH-WHAT>" data-indeed-search-where="<SEARCH-WHERE>" data-indeed-search-job-types="<SEARCH-JOB-TYPES>" data-indeed-search-occupations="<SEARCH-OCCUPATIONS>" ></div> ... </body></html>山かっこ（<>）内のパラ メータを使用する値に置き換えます。
次の表は data-indeed-* 属性を説明しています。
| 属性 | 型 | 必須 | 説明 |
|---|---|---|---|
data-indeed-plugin-type | String | 必須 | この要素で有効にする機能です。 |
data-indeed-partner-app-id | String | 必須 | Indeed が提供するウェブサイト識別子です。 |
data-indeed-placement-id | String | 必須 | ウェブサイト上のプラグイン配置を表す識別子です。この値は Indeed が提供します。 |
data-indeed-search-limit | Integer | 任意 | 求人検索 UI に表示する求人の最大数です。 範囲: 1〜20。デフォルト: 10。 |
data-indeed-search-what | String | 任意* | クエリで使用する検索キーワードです。 例： スペースで区切られた複数のキーワードは 例：
*次の属性のうち少なくとも 1 つを指定します。
|
data-indeed-search-where | String | 任意* | クエリで使用する勤務地です。 例： *次の属性のうち少なくとも 1 つを指定します。
|
data-indeed-search-job-types | String | 任意 | SUID で指定される雇用形態フィルタのカンマ区切りリストです。 この属性を省略した場合は、Indeed のデフォルトの雇用形態フィルタのみが適用されます。 例： 複数の値は |
data-indeed-search-occupations | String | 任意* | SUID で指定される職種フィルタのカンマ区切りリストです。 この属性を省略した場合は、Indeed のデフォルトの職種フィルタのみが適用されます。 例： 複数の値は *職種フィルタの SUID 値は将来変更される可能性があります。 |
次のいずれかに該当する場合、プラグインは求人検索 UI を表示しません。
- パラメータが無効である。
- 求人検索結果が返されない。
求人検索 UI を表示する
求職者の役に立つ場所に求人検索 UI を表示します。
UI の上部にヘッダーを追加し、ページのコンテンツと求人検索結果を関連付けま す。これらの求人を表示する理由をユーザーが理解できるようにします。
次のページに UI を表示します。
| ページ | ヘッダーの例 | 説明 |
|---|---|---|
| 検索結果ページ | 関連する他の求人 | 自社サイトの検索結果の後に、Indeed PLUSの関連求人を追加で表示します。 検索結果が返されない場合は、代わりに関連するIndeed PLUSの求人を表示します。 |
| 記事ページ | この記事に関連する求人 | 記事の後に関連求人を表示します。 |
ページ上の複数の場所に求人検索 UI を配置した場合、プラグインは最初の場所にのみ UI を表示します。
求人検索 UI のレイアウト
求人検索 UI はコンテナの幅に適応し、モバイルおよびデスクトップのレイアウトで適切に表示されます。最大幅は 700 px です。
求人検索 UI をカスタマイズする
求人検索 UI の次のコンポーネントをカスタマイズできます。
- ヘッダーセクションのテキスト色
- リスト本文の背景色
- 求人カードのView jobボタンの背景色とテキスト色
- 関連求人リンクのテキスト色
次の画像は、デフォルトとカスタマイズ後の求人検索 UI を示しています。
これらの要素をカスタマイズするには、Indeed 担当者に連絡してください。色は #FFFFFF のような 16 進数値で指定します。文字が読みやすい色の組み合わせを使用してください。たとえば、白い背景に白い文字は使用しないでください。テスト期間中にデザインを確認し、必要な変更を依頼してください。
ベストプラクティス
求人検索 UI を表示する際は、次のガイドラインに従います。
適切な検索条件を設定する
ページのコンテンツに関連する求人検索条件を設定します。
対比のある色を使用する
コンテンツが背景と対比する色を選択します。たとえば、白の背景に白のテキストを使用しないでください。
レイアウトの柔軟性を確保する
求人検索 UI の高さは、求人カードの数とサイズによって異なります。サイトのレイアウトが UI の高さの変化に適応するようにしてください。
マージンを追加する
求人検索 UI の上下に少なくとも 16 px のマージンを確保します。
適切なヘッダーを表示する
求人検索 UI の上部に説明用のヘッダーを追加し、これらの求人が表示される理由をユーザーが理解でき るようにします。収益化のためにユーザーが求人をクリックするよう誘導しないでください。
プラグインが求人検索 UI を表示することを確認する
次の場合、プラグインは求人を表示しません。
- 求人検索結果が返されない。
- API呼び出しが失敗する。
- 月間収益上限に達した。
Indeed は、プラグインが表示する求人へのクリックに対して、各パブリッシャーに収益上限を設定します。上限に達すると、プラグインは求人の表示を停止します。詳細については Indeed 担当者にお問い合わせください。
プラグインが求人検索 UI を表示するかどうかを確認するには、プラグインのルート要素で indeed-plugin-event イベントをリッスンします。detail フィールドにはイベントの種類とペイロードが含まれます。payload.success フィールドは、プラグインが UI を表示したかどうかを示します。
次のコードスニペットは API 実装の一部を示しています。コードにコピーしないでください。
type IndeedPluginEventDetail = { type: "load"; payload: { success: boolean; }}// When the plugin rendering succeedsconst eventDetail: IndeedPluginEventDetail = { type: "load", payload: { success: true }};// When the plugin rendering failsconst eventDetail: IndeedPluginEventDetail = { type: "load", payload: { success: false }};const indeedPluginEvent = new CustomEvent("indeed-plugin-event", { detail: eventDetail});次の例は、プラグインが UI を正常に表示したかどうかを確認する方法を示しています。
const pluginRoot = document.getElementById("<plugin-root-id>");pluginRoot.addEventListener("indeed-plugin-event", (event) => { const { type, payload } = event.detail; if (type === "load") { const success = payload.success; if (success) { // When the rendering succeeds } else { // When the rendering fails } }});