WordPress (Shifter) + HubSpot の活用法

WordPress (Shifter) + HubSpot の活用法

Shifter + HubSpot アーキテクチャ

Shifter Advent Calendar 2021 12/18(土) の記事となります。
DigitalCube ではチャット・お問い合わせフォームで SaaS を活用しています。この記事では LabWorks で利用している HubSpot のワークフロー、WordPress(Shifter)との連携をご紹介します。


Shifter ではフォームの送信には外部サービスが必要

Shifter は WordPress のコンテンツ(投稿や固定ページ、アーカイブなど)を HTML ファイルに変換した上でホスティングしています。そのため WordPress の検索フォームやお問い合わせフォーム(メール送信フォーム)を設置したい場合は外部サービス(SaaS)を利用する必要があります。

どういった SaaS があるかは Shifter ブログで紹介しています。

目的に合わせたフォーム と Shifter Static の連携でビジネスをアップグレード
https://www.getshifter.io/ja/upgrade-your-business-with-a-purpose-built-form-and-shifter-static-integration-ja/

Algolia の InstantsearchをNO Codeで WordPress サイトに埋め込めるプラグイン「Search with Algolia Instantsearch Blocks」をリリースしました
https://www.getshifter.io/ja/search-with-algolia-instantsearch-blocks/


\WordPress のコンテンツを HTML ファイルに変換できる Shifter とは?/

HubSpot を採用した理由

LabWorks ではお問い合わせフォーム・チャット・資料ダウンロードで HubSpot を採用しています。
HubSpot は、セールス、マーケティング、カスタマーサクセスが一つにまとまったオールインワンのインバウンドマーケティング&セールスソフトウェアです。

HubSpot | インバウンドマーケティング&セールスソフトウェア
https://www.hubspot.jp/

LabWorks では受付したお問い合わせや顧客情報・資料の管理とフォームの内容(どのような項目が必要か)の管理をCS/マーケチーム主体で行い、誰が対応するのか、進捗状況の共有と可視化・フォローアップといった受付後のワークフローも考える必要がありました。
このためメールのみで受け付けるフォームだけではなくセールス・マーケティングにも活用し他の SaaS とも連携可能な HubSpot を採用しました。

LabWorks での HubSpot 活用法

Shifter + HubSpot アーキテクチャ
Shifter + HubSpot アーキテクチャ

WordPress との連携

WordPress との連携はプラグインを利用して簡単に行えます。

HubSpot – CRM、メールマーケティング、ウェブチャット、フォーム、およびアナリティクス
https://ja.wordpress.org/plugins/leadin/

プラグインをインストールして有効化のあとに HubSpot のテナントと連携させるだけです。

HubSpotアカウント設定
HubSpotアカウント接続画面

固定ページ(など)への設置は「HubSpotフォーム」ブロックで利用したいフォームを選択します。

HubSpotブロック
HubSpotフォームブロック

フォーム内のフォントファミリーやボタン、ラベルの色は HubSpot でフォーム毎に設定できます。

HubSpotフォーム編集画面
HubSpotフォーム編集画面

HubSpot のスタイルの調整のみで対応できない見栄えは WordPress での調整になります。詳細については下記のドキュメントを参考にしてください。

外部サイト上にHubSpotフォームを埋め込み、スタイルを設定する
https://knowledge.hubspot.com/jp/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site

受信したお問い合わせの管理

HubSpot のフォーム・チャットから送信されたお問い合わせは全て HubSpot 内の受信トレイに入ります。
弊社では HubSpoot をコーポレートサイト、AMIMOTO、LabWorks で利用しています。どのサイトの問い合わせなのかを分かりやすくするため、HubSpot の受信トレイをフォルダ分けして、自動でそれぞれのフォルダに入るように設定しています。

また LabWorks 内でもフォームの種別によって受信後のワークフローを変更しています。

  • 資料ダウンロード:受信トレイと指定メールアドレスへの送信。
  • お問い合わせフォーム:受信トレイと指定メールアドレスへの送信、Backlog の特定プロジェクトに課題作成(Backlog のメールによる課題登録機能)。
  • チャット:受信トレイで対応。

HubSpot にはチケット管理システムもありますが、弊社は社内のタスク管理ツールで Backlog を利用しているため Backlog のメールによる課題登録機能を利用しています。
他に Slack や Asana といった別のサービスと連携することもできます。

HubSpotフォームオプション画面
HubSpotフォームオプション画面

資料ダウンロードの管理

配布用ファイルは営業資料としても活用するため Box で一元管理しています。
LabWorks の資料ダウンロードでは送信完了後のサンキューメッセージで資料ダウンロードボタンに共有リンクを利用しています。

HubSpotフォームサンキューメッセージの編集
HubSpotフォームサンキューメッセージの編集

WordPress でフォームを設置後、資料の差し替え(バージョンアップ)やURLの変更があった場合でも Box や HubSpot の操作のみで差し替えが完了します。

アクセス解析も HubSpot で実施可能

HubSpot 標準でフォームのビュー数、送信、コンバージョン率を解析できます。
Box もファイルのダウンロード数を計測できます。

最後に

HubSpot は今回紹介した LabWorks での活用法以外にもチケットやナレッジベース、複数サービスを組み合わせるワークフローなど様々な機能が提供されています。
弊社では HubSpot を活用したお問い合わせや顧客情報の一元管理、Webサイトを含む他サービスとの連携などの導入支援サービスを行っていますので、是非お気軽にお問い合わせください。

HubSpot Service Hub の導入支援
https://www.digitalcube.jp/products/hubspot/

三菱重工業様 ノーコードな HubSpot でグループ企業向けサポートシステムを短期間で実現し、デジタル活用を効果的にサポート。HubSpot ServiceHub 導入事例
https://labworks.digitalcube.jp/blog/interview_20211130_mhi-2/


Shifter Advent Calendar 2021 19日目はベクトルの石川さん ( @kurudrive ) による Shifter × Lightning についてのブログです。

SmartHRSHARP
mikihouseInternet Society
INFOBAHN GROUPfreee
CanCam旭化成
SmartHRSHARP
mikihouseInternet Society
INFOBAHN GROUPfreee
CanCam旭化成
Contact

当社へご興味をお持ちいただきありがとうございます。
「こんなことやってみたい!」と、ぜひ気軽にご相談ください。
担当者よりご連絡差し上げます。