お世話になっております。
メルマガアプリのKlaviyoを使って誕生日クーポンを送りたいのですが、Klaviyoに値の渡し方がわからずに困っています。
会員登録時に誕生日を入力してもらい、その値を誕生日クーポンを送るフロー作成に使用しようと考えています。
誕生日取得用のリストを作成し、下記のページを参考に会員登録の際のフォームの中に、誕生日入力フォームを作成してみました。
リストIDの設定方法については下記も参考にしました。
https://help.klaviyo.com/hc/en-us/articles/115005080127-How-to-Add-Custom-Fields-to-a-Legacy-Form
しかしリストには何も追加されません。
のvalue部分が間違っているのかと思うのですが、何がおかしいでしょうか？
アプリの開発元にも問い合わせてみましたが、英語が得意ではないためうまく説明できず、的確な回答がもらえずにいます。
HTMLは、この後カスタマイズ予定です。
Klaviyoへの値の渡し方がわからないため、一旦サイトの参考コードをそのまま記述しています。
私自身は、Klaviyoをこちらの質問に回答するために開発ストアにインストールしてみた、くらいのレベルですので、他の回答をお待ちいただくのが良いかもしれません。
まず、最初に記載されていたこちらのリンクについてですが、
https://help.klaviyo.com/hc/en-us/articles/115005080127-How-to-Add-Custom-Fields-to-a-Legacy-Form
レガシーバージョンのフォームの記事であるため、
新しいフォームを使用することをお勧めされているようです。
下記の記事です。
https://help.klaviyo.com/hc/en-us/articles/360026474752,
こちらの記事にある、新しいフォームであれば、サインアップフォームに、Profile Propertyに"Birthday"を設定したDateフィールドを追加するだけで誕生日を取得できました。
さて、
ご質問は「会員登録フォーム」から誕生日を取得したいとのことでしたね。
質問者様が参考にされているURLも、私が記載したURLも、Klaviyoで作成できるサインアップフォームのカスタマイズ方法であるように思います。
言い換えますと、Shopifyの会員登録フォームから取得した情報を、Klaviyoに渡す方法は、私は見つけることができませんでした。
Shopifyの会員登録フォームに情報を付与するやり方は下記になります。
https://shopify.dev/themes/customer-engagement/additional-customer-information
note (メモ)を使用するのですが、私が試したところ、note はKlaviyoに反映されませんでした。
しかし、会員タグは反映されるようです。
のようにし、
フィールドに入力された値を、birthday-YYYYMMDDに埋め込んであげることで、
会員タグとしてなら、誕生日っぽいものを取得できそうですが、
これを、Klaviyoのflowでうまく使えるかまでは確認できておりません。(おそらくできない？)
一番、ストレートな方法は、Klaviyoのサインアップフォームで、メルマガ会員登録フォームを作り、そこで誕生日を入力いただく、となります。
ご希望にそった回答ではありませんが、
ご参考まで。
(キュー田辺)
田辺様
私の質問のためにアプリを入れて、試していただいたとのことで大変ありがとうございました。
会員登録時に誕生日を入れていただいて年齢確認も行う予定ですので、その情報を使ってKalviyoの誕生日フローを作成できたらと思っていました。
会員タグに「誕生月：1月」のようなタグを付ければ、誕生日フローではなく、キャンペーンとしてなら誕生月にメールを送ることもできるかと考えました。
ただ、おそらく毎年自動で送ることができない点と、既存顧客にタグを追加する方法が私には難しく、実装できるか微妙なため（まだ勉強不足でして、APIの操作がよくわかっていません）、Klaviyoに直接日付データを渡せればと考えていました。
もう少し、他の方の回答も待ってみます。
Klaviyoへの日付の渡し方が見つからなければ、Klaviyoのサインアップフォームを使用する方法を検討したいと思います。
詳細確認していませんが、以下のKlaviyoのコミュニティの投稿が該当するのではと思います。
他にも該当するものはありそうなので検索されることをお勧めします。
他方、こちらも詳細確認していないので根拠は薄いですが、下記ページ内にSync all your Shopify dataと書かれており同期機能が利用できる可能性もあるのかなと思います。
KlaviyoはAPIも提供しているのですね。
それであれば、やりようがありそうですので試してみました。
まず、会員登録のliquid (customer/register.liquid)を開きます。
Step1. 下記をformに埋め込みます。
Step2. liquid内の適当な位置に下記のスクリプトを埋め込みます。
会員登録すると、KlaviyoにBirthdayを渡すことができました。
注意点
つまり、このコード自体の信頼性は低いです。
あくまで、参考に留めていたければと思います。
(キュー田辺)
Jizo様
ご回答ありがとうございます。
教えていただいた投稿では、タグか手動アップロードの方法が書かれていますね。
他にも検索してみます。
ありがとうございます。
田辺様
ご回答ありがとうございます。
こんな方法もあるのですね。
とても勉強になります。
APIの詳細はどちらのページをご覧になりましたか？
よろしければ教えていただけると助かります。
勉強不足で
const options = {
method: 'POST',
headers: {Accept: 'text/html', 'Content-Type': 'application/x-www-form-urlencoded'},
body: new URLSearchParams({
data: '{"token": "{{質問者様のPublic Key}}","properties": {"$email":"' + email + '","$birthday":"' + birthday + '"}}'
})
};
fetch('https://a.klaviyo.com/api/identify', options)
.then(response => response.json())
.catch(err => console.error(err));
}
の部分のコードがよくわかっていませんが、調べてみようと思います。
ありがとうございます。
KlaviyoのAPIのドキュメントは下記のURLにあります。
https://developers.klaviyo.com/en/reference/api-overview
このうち、Profileの作成に使用するのは下記になります。
https://developers.klaviyo.com/en/reference/identify-post
(このページ内の、LANGUAGEをJavaScriptにしますと、ちょうど、質問者様が気になっているコードが丸っと記載されています。私の方で、fetchのthenを1つ削除していますが、特に意味はありませんので、お気になさらず。)
ご参考まで。
(キュー田辺)
田辺様
ご丁寧に教えていただいてありがとうございます。
確かに気になっていたコードが書いてありました。
これであればできそうです。
教えていただいた注意点などは気にしなければいけないと思いますが、こちらを参考に作成してみようと思います。
ありがとうございました。