Shopify Multipassで顧客情報作成時にマーケティングメールの購読情報を連携する

アソビューAdvent Calendar 2023の3日目（B面）のブログです。

こんにちは！
アソビューでフロントエンドエンジニアをしている野口です。
今回はShopifyのMultipass機能を使用している中で直面した課題とその対処法について紹介しようと思います。

はじめに

弊社では、アソビュー！に掲載されている遊びの中から厳選した体験を、家族や友人にプレゼントできるアソビュー！ギフトというサービスを展開しています。
そのアソビュー！ギフトはShopifyを利用してECサイトを構築しており、会員登録やログイン時にShopify Multipass機能を利用しています。
Multipass機能を使用している中で、会員登録時にマーケティングメールの購読情報に関する課題に直面したため、その内容と対処法について紹介していきます。

Shopify Multipassとは

まず、簡単にMultipass機能について説明します。
ShopifyでECサイトを運用する際に、そのECサイトとは別にすでに会員情報を管理しているWebサイトが存在する場合もあるかと思います。
Shopifyと別のWebサイト（私たちの場合はアソビュー！）でそれぞれ会員登録を行うのではなく、アソビュー！の会員情報でShopifyにログインできるようにしたい、それを実現する仕組みがShopify Multipassです。

Multipass機能を利用すると、ゲストは既にあるWebサイトにログイン（もしくは会員登録）すると、ShopifyサイトにリダイレクトされシームレスにShopifyサイト上でもログイン状態になります。

今回はすでにMultipass機能が設定済みとして話を進めていきます。
詳細なMultipass機能の設定方法には触れないのでもし興味がある方はこちらからご確認ください。

直面した問題

そんなShopify Multipass機能をアソビュー！ギフトでも利用しているのですが、1点問題がありました。

アソビュー！ギフトでは、カゴ落ちやチェックアウト離脱など購入まで完了しなかったゲストに対してShopifyのマーケティングオートメーション機能を利用しリマインドのメールを送信しています。
送信対象としてはアソビュー！の会員登録画面でマーケティングメールの購読を許可してくださっている方です。

ただ、Multipass機能ではマーケティングメールの購読を許可したかどうかの情報を連携できないため、新規登録してくださった方で購入前に離脱したゲストに対してリマインドのメールを送ることができません。たとえ会員登録画面でメール購読を許可してくださったとしても意味がない状態です。

Mulipassでリダイレクトする際のパラメータの設定だけでなんとかできないかと思ったのですが、
残念ながらAdmin APIのCustomer情報を参考にaccepts_marketingのパラメータを渡してみたりしましたがアカウント情報には反映されませんでした。

// accepts_marketingを追加して実装のイメージ
{
  "email": "nicpotts@example.com",
  "created_at": "2013-04-11T15:16:23-04:00",
  "return_to": "http://yourstore.com/some_specific_site",
  "accepts_marketing": "true" -> Shopifyの顧客情報に反映されない
}

今回行った対処法

そこで今回は利用可能なパラメータの中にあるtags_stringというパラメータと、Shopify Flowを使いメール購読情報を連携するようにしました。

全体の処理の流れとしては以下になります。

  • ①. 購読許可の場合、リダイレクト時のtags_stringに「acceptsMarketing」を追加
    • （Shopifyの顧客情報が作成される）
  • ②. 顧客作成をトリガーにHTTPリクエストを実行し、弊社システムのAPIを呼び出す
  • ③. 弊社システムAPI内でShopifyのAdmin APIを使い作成した顧客のメール購読情報を更新

全体の処理の流れ

①. リダイレクト時のtags_stringに「acceptsMarketing」を追加

tags_stringはカンマ区切りで複数設定でき、設定した情報はShopifyに作成される顧客情報にタグとして登録されます。（参考）
メール購読を許可した場合はこのtags_stringにacceptsMarketingという文字列を設定します。

{
  "email": "nicpotts@example.com",
  "created_at": "2013-04-11T15:16:23-04:00",
  "return_to": "http://yourstore.com/some_specific_site",
  "tags_string": "acceptsMarketing"
}

タグが登録されるとShopify管理画面の顧客情報からタグを確認できます。

顧客情報に登録されたタグ

②. 顧客作成をトリガーにHTTPリクエストを実行し、弊社システムのAPIを呼び出す

Shopify Flowでは、あるイベント（例えば顧客作成など）をもとにアクション（例えばHTTPリクエストなど）を実行することができます。
（Shopify FlowでHTTPリクエストを送信する方法はこちらのブログに詳細ありますのでぜひ確認してみてください！） tech.asoview.co.jp

今回作成したFlowとしては以下です。

  • イベント: 顧客作成
  • 条件: tagsにacceptsMarketingを含む
  • アクション: HTTP リクエスト
  • リクエストBody
    • customerId: {{customer.legacyResourceId}}

Shopify Flowの設定

リクエスト先のエンドポイントには後述のAPIを指定します。

③. ShopifyのAdmin APIを使い作成した顧客のメール購読情報を更新

ShopifyのAdmin APIを使うことでShopifyに登録されている顧客情報を更新することができます。
弊社では既にShopify Flowをもとに弊社システムのAPIを呼び出す処理を過去に実装していたため、今回も同様に弊社システム側に別途APIを用意しそこから顧客情報更新用のAdmin APIを呼び出す作りにしています。

以下はGraphQLでAdmin APIを呼び出す実装例になります。

// クエリ
mutation customerEmailMarketingConsentUpdate($input: CustomerEmailMarketingConsentUpdateInput!) {
  customerEmailMarketingConsentUpdate(input: $input) {
    customer {
      id
    }
    userErrors {
      field
      message
    }
  }
}

購読する場合は、marketingStateを"SUBSCRIBED"、購読解除する場合は"UNSUBSCRIBED"で設定します。
似たような値として"NOT_SUBSCRIBED"がありますが、"NOT_SUBSCRIBED"へのステータス更新はできないため、購読解除する際は"UNSUBSCRIBED"を指定します。

// 前述のmutationクエリに渡すvariables
{
  "input": {
    "customerId": "gid://shopify/Customer/1234567891234",
    "emailMarketingConsent": {
      "marketingOptInLevel": "SINGLE_OPT_IN",
      "marketingState": "SUBSCRIBED"
      
    }
  }
}

注意点

これでマーケティングメールの購読情報を連携することができました。

しかし、このやり方を行う上で2点考慮しておいたほうがいい点があります。

タグの上書き

まず1つ目は顧客情報のタグの上書きについてです。
Multipassのリダイレクト時にtags_stringを設定することで顧客情報のタグを登録していますが、こちらはアカウント作成時だけでなくログイン時にもタグを上書きします。

そのため、既存で顧客情報にタグが設定されている場合は、その情報が消えてしまいます。
弊社の場合は顧客情報のタグは特に利用していなかったので問題なかったのですが、もし利用されている場合はMultipassでリダイレクトする前にメールアドレスをもとにShopifyの顧客情報を取得し、既存で設定されているtags_stringも合わせてリダイレクト時に渡すなどの処理を検討するのが良いかと思います。

チェックアウト画面でのメール購読確認

2つ目の注意点は、チェックアウト画面でのマーケティングメールの購読確認についてです。
Shopifyではチェックアウト画面でもマーケティングメールの購読確認有無のチェックを表示することができます。

チェックアウト画面のメール購読確認

設定によってはログインしているゲストの現在のメール購読状態によってデフォルトのチェックの有無が決まります。
Shopify Flow経由で更新する今回の場合、APIの実行に一定時間がかかってしまうため、
「カート」 -> 「会員登録」 -> 「チェックアウト」とチェックアウト画面に遷移したタイミングでAPIのメール購読情報の更新処理が完了しておらず、デフォルトで未チェックの状態となってしまいます。

ここでチェックをつけずに購入を完了してしまうと、購入完了時にメール購読の状態が「マーケティングメールは購読しない」という状態で更新されてしまいます。
チェックアウト画面のチェックボックスに気づかず未チェックにしてしまう人もいるのでチェックアウト画面ではマーケティングメールの登録チェックはデフォルトでチェックがついている状態、もしくは非表示にすることをおすすめします。

マーケティングメールの登録チェックの非表示の仕方は、Shopifyの管理画面で
「設定」 -> 「チェックアウト」 -> 「マーケティングオプション」から設定を変更することができます。
こちらのチェックを外せばチェックアウト画面でのメール購読情報の変更はできなくなります。
デフォルトでチェックがついた状態にしたい場合は、「メール」にチェックをつけ「あらかじめ選択されている」にもチェックをつければ設定できます。

Shopify管理画面のマーケティングオプション設定

最後に

今回はShopifyのMultipass機能のメール購読情報連携に関して紹介しました。

アソビューでは一緒に働くメンバーを大募集しています！
カジュアル面談もありますので、少しでも興味があればお気軽にご応募いただければと思います！

www.asoview.com