Publisher JavaScript Plugin

フロントエンドの変更だけで、求人サイトまたはパブリッシャーサイトに Indeed の機能を連携します。

 

概要

Publisher JavaScript Pluginによって、フロントエンドの変更のみで、 求人検索機能を貴社の求人サイトやメディアサイトに連携できるようになります。

このプラグインの 求人検索機能 は、Indeed および Indeed PLUS の求人サイトの求人を自社サイトに表示します。

求人検索機能を利用すると、指定したクエリに基づく求人のリストを貴社サイトで求職者が閲覧できるようになります。 各求人には固有の求人カードがあり、求人に関する情報や Indeed の求人へのリンクが記載されています。

Indeed は、Indeed PLUSの全求人のプールから、貴社のサイトで表示できる一部の求人を提供します。 詳細については、Indeed の担当者にお問い合わせください。

---

ブラウザサポート

このプラグインは HTTPS ページでのみ動作します。次のブラウザに対応しています。

サポート対象のブラウザ

OS	Chrome	Firefox	Safari	Edge (Chromium)
Linux	✅	✅	N/A	✅
macOS	✅	✅	✅	✅
Windows	✅	✅	N/A	✅
Android	✅	❌	N/A	❌
iOS	✅	❌	✅	❌

---

手順

1. 始める前に

Indeed パートナーである必要があります。プラグインへのアクセスを取得するには、Indeed の担当者に連絡してください。

---

2. プラグインスクリプトを読み込む

プラグインを表示する各ページに、次の <script> タグを追加します。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://plugins.indeed.com/publisher-plugin/main.js" crossorigin defer></script>
  </head>
</html>

---

3. プラグインをテストする

セットアップ中に、本番環境 のドメインと、必要に応じて テスト環境 のドメインを Indeed に伝えます。

テストドメインで読み込まれると、プラグインは テストモード で動作します。テストモードは本番と同じように動作しますが、View job ボタンは無効になります。

---

4. 求人検索を有効にする

求人検索 UI を表示するには、UI を表示したい場所に data-indeed-* 属性を持つ HTML 要素を追加します。例:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://plugins.indeed.com/publisher-plugin/main.js" crossorigin defer></script>
  </head>
  <body>
    <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-* 属性

属性	型	必須	説明
data-indeed-plugin-type	String	必須	表示する機能です。job-search である必要があります。
data-indeed-partner-app-id	String	必須	自社ウェブサイトの ID です。Indeed がこの値を提供します。
data-indeed-placement-id	String	必須	ウェブサイト上のこのプラグイン配置の ID です。Indeed がこの値を提供します。
data-indeed-search-limit	Integer	任意	求人検索 UI に表示する求人の最大件数です。 1 から 20 の間である必要があります。デフォルトは 10 です。
data-indeed-search-what	String	任意*	検索語です。 語をスペースで区切ると、すべての語に一致する求人が返されます。たとえば、"Senior Engineer" では、"Senior" と "Engineer" の両方に一致する求人だけが返されます。 語を OR で区切ると、いずれかの語に一致する求人が返されます。たとえば、"Engineer OR Nurse" では、"Engineer" または "Nurse" に一致する求人が返されます。 *data-indeed-search-what と data-indeed-search-where の少なくとも一方を指定してください。
data-indeed-search-where	String	任意*	検索する勤務地です（例: "Tokyo"）。指定できる勤務地は 1 つのみです。 指定できる最も詳細なレベルは、区、町、村などの市区町村です。たとえば、東京都渋谷区や大阪市北区を指定できます。 *data-indeed-search-what と data-indeed-search-where の少なくとも一方を指定してください。
data-indeed-search-job-types	String	任意	絞り込みに使用する雇用形態の SUID のカンマ区切りリストです。 プラグインは、いずれかの値に一致する求人を返します。たとえば、"5QWDV, 75GKK" では、雇用形態が 5QWDV または 75GKK の求人が返されます。 この属性を省略すると、プラグインは Indeed が自社サイト向けの求人にすでに適用しているフィルターのみを使用します。
data-indeed-search-occupations	String	任意	絞り込みに使用する職種の SUID のカンマ区切りリストです。 プラグインは、いずれかの値に一致する求人を返します。たとえば、"HY4VD,6HZUJ" では、職種が HY4VD または 6HZUJ の求人が返されます。 この属性を省略すると、プラグインは Indeed が自社サイト向けの求人にすでに適用しているフィルターのみを使用します。 職種の SUID は、将来変更される可能性があります。

属性が無効な場合や、検索で求人が返らない場合、プラグインは求人検索 UI を表示しません。

求人検索 UI を表示する

求職者に役立つ場所に求人検索 UI を表示します。UI の上には、これらの求人を提案している理由を説明する見出しを追加してください。

UI は次のページに表示できます。

UI を表示する場所

ページ	見出しの例	説明
検索結果ページ	関連する求人をさらに表示	サイトの検索結果の後に、Indeed PLUS の関連求人をさらに表示します。 検索で結果が返らない場合は、代わりに Indeed PLUS の関連求人を表示します。
記事ページ	この記事に関連する求人	記事の後に関連求人を表示します。

1 つのページに求人検索の要素が 2 つ以上ある場合、プラグインは最初の要素にのみ UI を表示します。

求人検索 UI のレイアウト

求人検索 UI は、モバイルとデスクトップのどちらでもコンテナの幅に合わせて表示されます。最大幅は 700px です。

コンテナの幅が 700px 未満の場合、コンテナの幅が 700px 超の場合

求人検索 UI をカスタマイズする

求人検索 UI では、次の色を変更できます。

• 見出しの文字色
• 求人リストの背景色
• 求人カード上の View job ボタンの背景色と文字色

この画像は、デフォルトの求人検索 UI とカスタマイズした求人検索 UI を示しています。

デフォルトのスタイルと、カスタマイズしたスタイルの例

色を変更するには、Indeed の担当者に 16 進数の値を送ってください（例: 白は #FFFFFF）。コントラストのある色を選んでください。コントラストのある色を使用するをご覧ください。

テスト中にデザインを確認し、必要に応じて調整してください。

---

ベストプラクティス

求人検索 UI を表示する際は、次のガイドラインに従ってください。

適切な検索条件を設定する

ページのコンテンツに合った検索条件を使用してください。

✅ 正しい例

❌ 誤った例

コントラストのある色を使用する

文字と背景のコントラストが十分であることを確認してください。たとえば、白い背景に白い文字を使用しないでください。

✅ 正しい例

❌ 誤った例

レイアウトの柔軟性を確保する

求人検索 UI の高さは、表示する求人カードの数と高さによって決まります。サイトのレイアウトが異なる高さに対応できることを確認してください。

✅ 正しい例

❌ 誤った例

余白を追加する

求人検索 UI の上下に、最低 16px の余白を確保してください。

適切な見出しを表示する

求人検索 UI の上に、ユーザーがこれらの求人を見る理由を説明する見出しを追加してください。収益を得ることだけを目的に、ユーザーに求人のクリックを促さないでください。

プラグインが求人検索 UI を表示することを確認する

次の場合、プラグインは求人を表示しません。

• 求人検索で結果が返らない場合
• API の呼び出しが失敗した場合
• 月間の収益上限に達した場合

Indeed は、プラグインの求人のクリックから毎月得られる収益に上限を設定しています。上限に達すると、プラグインは求人の表示を停止します。詳細は Indeed の担当者に連絡してください。

プラグインが求人検索 UI を表示したかどうかを確認するには、プラグインのルート要素で indeed-plugin-event イベントをリッスンします。イベントの detail フィールドでは、type がイベントの種類を示し、プラグインが UI を表示した場合は payload.success が true になります。

たとえば、イベントを受け取るまでスピナーなどの読み込みインジケーターを表示します。その後、payload.success が true の場合にのみ見出しを表示します。

このスニペットは、プラグインがイベントを作成する方法を示しています。参照用です。自社のコードにはコピーしないでください。

type IndeedPluginEventDetail = {
  type: "load";
  payload: {
    success: boolean;
  }
}
// When the plugin rendering succeeds
const eventDetail: IndeedPluginEventDetail = {
  type: "load",
  payload: {
    success: true
  }
};
// When the plugin rendering fails
const eventDetail: IndeedPluginEventDetail = {
  type: "load",
  payload: {
    success: false
  }
};
const indeedPluginEvent = new CustomEvent("indeed-plugin-event", {
  detail: eventDetail
});

この例では、イベントをリッスンします。

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
    }
  }
});

---

関連項目

• 雇用形態 — data-indeed-search-job-types に指定する雇用形態の SUID の一覧です。
• 職種 — data-indeed-search-occupations に指定する職種の SUID の一覧です。

 

このページは役に立ちましたか？