開発者向けニュースに戻る

WhatsAppのShopifyへの統合

2023年3月7日作成者:Rashed Talukder
開発者ニュースをフォローする

中規模から大規模のビジネスのShopify開発者は、顧客とのシームレスなコミュニケーションがどれほど重要かご存じでしょう。このようなコミュニケーションを実現するために、WhatsApp Businessプラットフォームを活用すれば、自動化されたメッセージを何千もの顧客に送信し、顧客ベースの拡大に合わせて送信処理を効果的にスケーリングしやすくなります。

このチュートリアルでは、WhatsAppをShopifyに接続し、顧客がストアで起こしたイベント(商品をカートに追加する、注文する、など)に基づいてWhatsApp通知メッセージを顧客に送るプロセスについて順を追って説明します。ここでは、MetaがホストするクラウドAPIを使用します。

前提条件

このチュートリアルで、以下のことを行う必要があります。

最後のステップを実行すると、一時的なアクセストークンが付与されます。チュートリアルの残りの部分ではこれが必要になりますので、記録しておいてください。

これらの要件を満たした後、チュートリアルの残りの部分に進めます。

WhatsAppのメッセージテンプレートを作成する

WhatsAppメッセージテンプレートは、繰り返し使えるメッセージフォーマットを多数作成するのに便利です。顧客にメッセージを送るためのアクセス許可を顧客がアプリに与えたら、顧客にメッセージを送信できるようになります。

次のステップに従い、注文通知メッセージのテンプレートを作成します。

  • ビジネスマネージャにサインインし、自分のビジネスアカウントを選択します。
  • ページの左上隅にある3本線のアイコンをクリックして[WhatsAppマネージャ]をクリックします。
  • サイドナビゲーションを使用して、[アカウントツール]アイコンにマウスを合わせ[メッセージテンプレート]をクリックします。
  • ページの右上隅の[テンプレート作成]をクリックします。
  • 続くページで、[取引関連]オプションをカテゴリとして選択してから、テンプレートに名前を付け(この場合は「order_confirmation」)、言語を選択します。
  • [続行]をクリックして、テンプレートエディターに進みます。

これで、order_confirmationテンプレートができたので、概要を定義しましょう。メッセージは顧客に次のように表示されます。

  • ご注文を承りました。

  • [顧客名]様、

  • ご購入ありがとうございます。

  • ただ今、お客様の注文(23190)を処理しています。商品は(休日と週末を除く) 2、3営業日中に発送いたします。

  • 発送いたしましたら、別途メールでご連絡します。

テンプレートエディターで、ヘッダーセクションに[テキスト]を選択してください。「ご注文を承りました」段落はヘッダーになります。メッセージの残りの部分は、本文セクションにコピーされます。

次に、本文テキストボックスのすぐ下で[変数の追加]を2回クリックし、2つの変数を追加します。最初の変数 — {{1}} — をコピーして顧客名のところに貼り付けます。次に、2番目の変数 — {{2}} — をコピーしてかっこの中の注文番号のところに貼り付けます。

これが終わると、メッセージは次のようになるはずです。同じページのプレビューエリアで確認できます。

[送信]をクリックして、メッセージテンプレートを保存します。

これでテンプレートの準備ができました。WhatsApp Businessプラットフォームを使用してWebhookをShopify管理者で作成し、顧客が注文を行ったときに顧客にメッセージを自動的に送信するアプリをマップできます。

Webhooksを使用して通知をExpressサーバーに送信する

Shopifyストアから顧客が注文したときに必ず自動作成されたメッセージを顧客に送信するとします。新しい注文がないか、5分ごとにストアを確認します。しかし、ショップにずっとAPIリクエストを送信することは非効率的です — 特に、新しい注文が全くないときはそう言えます。

Webhookがストアでの「order creation」イベントをリッスンし、顧客が注文を行ったときに毎回通知を受け取る方がはるかに効率的です。

以下に、「order creation」イベントWebhookを作成し、Expressサーバーにマップする基本的なステップを示します。

Node.jsプロジェクトを設定する

まず、“whatsapp-demo”という名前のフォルダをプロジェクト用に作成します。

次に、コマンド端末を起動し、“whatsapp-demo”ディレクトリに移動し、次のコマンドを実行してNode.jsプロジェクトを初期化します。

npm init -y

次のコマンドを実行して、Express (ウェブサーバーを作成するために使用するライブラリ)をNode.jsにインストールします。 

npm i express

これで、開発環境の設定ができました。次にExpressサーバーを作成します。

Expressサーバーを作成する

whatsapp-demoフォルダの中にtest.jsという名前のファイルを作成します。好きなソースコードエディターでそのファイルを開き、次のコードをコピーして貼り付けます。

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

上記のコードを使用すると、基本的なExpressサーバーを設定できます。このサーバーは、Webhookが「order creation」通知を送信したときにサーバーの端末にメッセージを表示します。

これをShopify Webhookにマップする前に、まずトンネルを設定する必要があります。

HTTPSトラフィックトンネルを設定する

Webhookを設定するとき、Shopifyは通知の送信先になる公開URLの指定を求めます。

このチュートリアルを公開サーバーで行っている場合は、そのURLを使用してください。このチュートリアルを自分のローカルマシンで行っている場合は、一般公開されているHTTPS URLを使ってトンネルを作成する必要があります。

まず、次のコマンドを実行して、ngrokをインストールします。 

npm install -g ngrok

次に、別の端末ウィンドウを起動し、次のコマンドを実行して、ローカルサーバーのトンネル URLを取得します。

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

次のステップで必要になるため、このURLをメモしておいてください。このクライアントを再起動すると、URLが新しくなり、このURLを参照しているものすべてを更新する必要があります。

ShopifyでWebhookを作成する

使用しているShopifyのストアの管理者になり、[設定] > [通知]に移動します。移動したら、[Webhooks]まで下にスクロールして[Webhookの作成]をクリックします。

「order creation」のWebhookを追加し、前のセクションで作成したトンネルURLまたは公開URLを指定します。

ノードindex.jsの別の端末でローカルサーバーを実行してから、[テスト通知の送信]をクリックします。

すべてがうまくいくと、サーバーの端末に「Yes we got an order」というメッセージが表示されます。

これで、ShopifyストアとExpressサーバー間の接続を作成できました。次に、顧客が注文を行ったらWhatsAppメッセージテンプレートを顧客に送ります。

「order_notification」テンプレートを使ってカスタムメッセージを送信する

まず、自分の端末で次のコマンドを実行して、Axiosをインストールします。

npm i axios

Axiosを使用して、WhatsAppメッセージを顧客に送信するPOSTリクエストを作成します。

Axiosをインストールしたら、プロジェクトフォルダにcustomMessage.jsという名前の別のファイルを作成し、次のコードでAxiosとExpressをファイルにインポートします。 

const axios = require('axios').default
const express = require('express')
const app = express()

次に以下のコードを実行して、Shopifyからのorder creation通知を処理するためのルートを作成します。 

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

Shopifyが/webhooks/orders/createを呼び出して注文を渡すと、注文の詳細情報がres(非同期コールバック関数の2番目の引数であるJavaScriptオブジェクト)の中のルートに送信されます。

次に、顧客の電話番号、名、注文IDを注文詳細から取得し、それらを使ってAPIリクエストパラメーターを構築します。

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
}

上記のオブジェクトには、リクエストを完了するのに必要なすべてのパラメーターが含まれています。オブジェクトに指定されているテンプレート名が、WhatsApp Businessマネージャで先に作成していたものと一致していることを確認してください。

次に、configオブジェクトを作成し、headersオブジェクトをネストさせます。headers内で、自分のWhatsAppアクセストークンを認証の値として設定し(ACCESS_TOKENを実際のトークンと置き換えます)、Content-Typeをapplication/jsonにします。

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

次に、AxiosのPOSTリクエストを作成し、configオブジェクトとdataオブジェクトの両方を引数として渡します。thenとcatchメソッドをネストさせると、結果が(失敗した場合はエラーメッセージが)表示されます。

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

YOUR_WABA_IDをWhatsAppアプリダッシュボードのWhatsApp Business IDに置き換え、API_VERSIONを互換性のあるクラウドAPIバージョン(デフォルトはv15.0)に置き換えます。

これでアプリが設定されました。

アプリをテストするには、ngrokトンネルが機能している必要があり、別の端末で次のコマンドを実行してExpressサーバーを始動させる必要があります。

node customMessages.js

ほかのShopifyイベント

注文のほかにも、Shopifyはさまざまなイベントで使えるWebhooksを50以上提供しています。カートの作成と更新、商品コレクションの作成と更新、請求の成功と失敗、およびその他の多くのものに関してサブスクリプション登録を行えます。

これらのWebhooksのいずれかを使用するには、上記で説明したのと同じようなパターンに従って、新しいWebhookを自分のShopify管理者で作成し、トピックをExpressサーバーでルートとして登録します。

これまで見てきたとおり、WhatsApp Businessプラットフォームは、Shopifyストアで発生したイベントに基づいて、手動またはプログラムにより、シームレスに顧客とコミュニケーションを取るうえで役立ちます。

ShopifyのWhatsApp統合により、一括メッセージをリアルタイムで顧客に送信できます。メッセージは自動(例: イベントに基づく)または手動で送信できます。設定しやすいだけでなく、スケーラブルでもあります。WhatsAppとShopifyを組み合わせると、顧客とのコミュニケーションは、一貫性があり、効果的で、インパクトを与えるものになります。

WhatsAppをアプリやプロジェクトに統合する方法については、Metaのほかの開発者チュートリアルをご覧ください。


タグ:
開発者ツールプラットフォーム2023WhatsApp
関連ニュース

WhatsApp BusinessプラットフォームとHubSpotの連携

開発者ツールプラットフォーム2023WhatsApp
2023年3月13日

ページインサイトAPIのアップデート

ビジネスツール開発者ツールプラットフォーム2023グラフAPIFacebook
2023年12月14日

開発者に「必要なアクション」ダッシュボードの提供を開始

開発者ツールプラットフォーム2023Facebook
2023年11月8日
その他のニュース