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 パートナーになった後、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>次に、求人検索機能を有効にします。
プラグインをテストする
セットアップ中に、プラグインを連携するサイトのドメイン名を指定します。
次の両方のドメイン名を指定できます。
- 本番環境
- テスト環境
プラグインをテストする場合、プラグインはテストドメインで読み込まれているかどうかを自動的に検知し、テストモード で動作します。テストモードでは、プラグインは本番モードとほぼ同じように動作しますが、View job ボタンは無効になります。
求人検索を有効にする
サイトで求人検索機能を有効にするには、プラグインスクリプトを読み込み、適切な属性を持つ HTML 要素を追加して UI を表示します。
この例は、求人検索 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 の上に見出しを表示します。これらの求人を提案している理由を、ユーザーが理解できるようにしてください。
UI は次のページに表示できます。
| ページ | 見出しの例 | 説明 |
|---|---|---|
| 検索結果ページ | 関連する求人をさらに表示 | サイトの検索結果の後に、Indeed PLUS の関連求人を追加で表示します。 検索で結果が返らない場合は、代わりに Indeed PLUS の関連求人を表示します。 |
| 記事ページ | この記事に関連する求人 | 記事の後に関連求人を表示します。 |
1 つのページで 2 か所以上に求人検索 UI を表示した場合、プラグインは最初の場所にのみ表示します。
求人検索 UI のレイアウト
求人検索 UI はコンテナの幅に合わせて調整されます。モバイルレイアウトとデスクトップレイアウトの両方で適切に表示されます。UI の最大幅は 700px です。
求人検索 UI をカスタマイズする
求人検索 UI では、次のコンポーネントをカスタマイズできます。
- 見出しセクションの文字色
- リスト本体の背景色
- 求人カード上の View job ボタンの背景色と文字色
この画像 は、デフォルトの求人検索 UI と、カスタマイズした求人検索 UI の例を示しています。
これらの要素をカスタマイズするには、Indeed の担当者に連絡してください。色は 16 進数で指定してください。たとえば、白は #FFFFFF です。
コンテンツが見づらくなる色の組み合わせは使用しないでください。たとえば、白い背景に白いフォント色を使用しないでください。
テスト期間中に求人検索 UI のデザインを確認し、必要な変更を加えてください。
ベストプラクティス
求人検索 UI を表示する際は、次のガイドラインに従ってください。
適切な検索条件を設定する
求人検索の条件は、ページのコンテンツに関連するものを設定してください。
コントラストのある色を使用する
コンテンツと背景のコントラストが十分な色を選択してください。たとえば、白い背景に白いフォント色を使用しないでください。
レイアウトの柔軟性を確保する
求人検索 UI の高さは、求人カードの数と高さによって決まります。サイトのレイアウトが、異なる高さの UI に対応できることを確認してください。
余白を追加する
求人検索 UI の上下に、最低 16px の余白を確保してください。
適切な見出しを表示する
求人検索 UI の上に説明用の見出しを表示し、ユーザーがこれらの求人を見る理由を理解できるようにしてください。収益化を目的に、ユーザーを求人のクリックへ誘導しないでください。
プラグインが求人検索 UI を表示することを確認する
次の場合、プラグインは求人を表示しません。
- 求人検索で結果が返らなかった場合
- API の呼び出しが失敗した場合
- 月間の収益上限に達した場合
Indeed は各パブリッシャーに対し、プラグインが表示する求人のクリックから得られる収益の上限を設定します。上限に達すると、プラグインは求人の表示を停止します。詳細は Indeed の担当者に連絡してください。
プラグインが求人検索 UI を正常に表示したかどうかを確認してください。プラグインは indeed-plugin-event タイプのイベントをプラグインのルート要素に送信します。detail フィールドにはイベントの type と payload が含まれます。payload の success フィールドは、プラグインが UI を正常に表示したかどうかを示します。
たとえば、spinner などの読み込みインジケーターを表示し、プラグインが 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 } }});