2024-09-09

Zendeskヘルプセンターを動的コンテンツで柔軟に運用する

こんにちは。技術部データ基盤チームのshinkaiです。最近まで別の部門でZendeskの構築/運用を担当していました。今回は、その経験から生まれた「動的コンテンツ」を使用したヘルプセンターの柔軟な運用方法について紹介します。

背景と課題

GMOペパボでは、Zendeskヘルプセンターをカスタマーサポートの効率化と顧客満足度の向上のために活用しています。ヘルプセンターでは、ユーザーに対してアナウンスを表示したいニーズが多くあります。しかし、運用を続けていく中で、いくつかの課題がありました。

コンテンツの硬直性: アナウンスの内容は基本的にソースコードに埋め込まれているため、変更の都度コード編集が必要
更新プロセスの複雑さ: ヘルプセンターのテーマをGitHubでバージョン管理しているため、内容変更にはプルリクエストの作成、レビュー、デプロイ（手動）が必要
即時性の欠如: 上記の理由により、カスタマーサポートのパートナーが日常的に使用しているヘルプセンターの内容を即時に編集することが困難

これらの課題により、緊急のお知らせや急な変更に迅速に対応できないケースが発生していました。

解決策の模索

これらの問題を解決するため、まずはヘルプセンターのフロントエンド機能やZendeskの標準機能で対応できないか検討しました。そんな中、Zendeskの機能として「動的コンテンツ」を発見しました。

動的コンテンツとは

動的コンテンツは、Zendeskが提供する機能の一つです。主に多言語対応のために使用されることが多いのですが、この機能を活用することで上記の課題を解決できる可能性を見出しました。

動的コンテンツの主な特徴

Zendeskの管理センター画面から直接編集可能
プレースホルダーを介して様々な機能から参照可能
内容の即時反映が可能

これらの特徴を活かし、ヘルプセンターの柔軟な内容管理を実現できると考えました。

実装例

動的コンテンツを活用したヘルプセンター改善のため、以下の実装を行いました。

1. 動的コンテンツの登録

Zendeskの管理センターで、アナウンス機能に必要な以下の動的コンテンツを登録します。

表示制御用フラグ: service_announcement_flag
タイトル: service_announcement_title
内容: service_announcement_content

動的コンテンツの追加手順の図

2. ヘルプセンターテンプレートの実装

Zendeskヘルプセンターでは、Curlybarsテンプレート言語が使用されています。これにより、動的なコンテンツの表示や条件分岐が可能になります。以下のコードは、Curlybarsの様々なヘルパーを使用して、動的コンテンツを条件に応じて表示するテンプレートです。

{{#is (dc "service_announcement_flag") "public"}}
  <div class="announcement-notice">
    <h2>{{dc "service_announcement_title"}}</h2>
    <div class="announcement-content">
      {{dc "service_announcement_content"}}
    </div>
  </div>
{{else}}
  {{#is (dc "service_announcement_flag") "preview"}}
    {{#if signed_in}}
      {{#if user.role}}
        <div class="announcement-notice admin-preview">
          <h2>{{dc "service_announcement_title"}}</h2>
          <div class="dc-">
            {{dc "service_announcement_content"}}
          </div>
          <div class="admin-preview-notice">
            プレビュー中: 匿名ユーザーには非表示です
          </div>
        </div>
      {{/if}}
    {{/if}}
  {{else}}
  {{/is}}
{{/is}}

このコードで実現していることは以下の通りです。

{{#is}} ヘルパー：条件分岐を行います。ここでは動的コンテンツの値を比較しています。
(dc "service_announcement_flag")：dc ヘルパーを使用して動的コンテンツの値を取得します。
- 条件分岐：
  - フラグが "public" の場合：すべてのユーザーに対してアナウンスを表示します。
  - フラグが "preview" の場合：管理者のみにプレビューを表示します。
  - それ以外の場合（"hidden" など）：何も表示しません。
{{#if signed_in}} と {{#if user.role}}：ユーザーがログインしているか、かつ特定の役割を持っているかをチェックします。これにより、プレビューモードを管理者のみに制限しています。
{{dc "service_announcement_title"}} と {{dc "service_announcement_content"}}：タイトルと内容を動的コンテンツから取得して表示します。

3. 実装後のUI

この実装により、管理画面から動的コンテンツを更新するだけで、ヘルプセンターのアナウンスを柔軟に管理できるようになりました。以下に、実際の動作と管理画面の例を示します。

ヘルプセンターでのアナウンス表示

動的コンテンツの設定内容

アナウンスタイトルの設定

アナウンス内容の設定

おわりに

今回は、Zendeskヘルプセンターを動的コンテンツで柔軟に運用する方法を紹介しました。動的コンテンツは公式ドキュメントや技術ブログでも事例が少ない機能ですが、使い方を工夫することで様々な拡張機能の柔軟性を高められる可能性があります。

今後も、今回得た経験や学びを今後の開発に活かし、さらなる品質向上と効率化を目指して取り組んでいきたいと思います。

メニュー

最新記事

リンク