.png)
・
「Webflowで新しいコンテンツを公開するたびに、その情報をKlaviyoに手動で登録するのが面倒…」
「WebflowとKlaviyoの間で顧客情報をコピー＆ペーストしていると、入力ミスが起きてしまわないか心配…」
このように、WebflowとKlaviyo間での手作業によるデータ連携に、非効率さやリスクを感じていませんか？
もし、<span class="mark-yellow">Webflowに新しいアイテムが公開されると、その情報を自動的にKlaviyoのプロフィールとして作成・更新する仕組み</span>があれば、こうした日々の繰り返し作業から解放されやすくなります。
本来時間をかけるべき、マーケティング戦略の策定やクリエイティブな業務に集中できる時間の創出に繋がるでしょう。
今回ご紹介する自動化の設定は、専門的な知識がなくてもノーコードで簡単に設定できるので、ぜひこの機会に導入して、日々の業務をもっと楽にしましょう！
Yoomには<span class="mark-yellow">WebflowとKlaviyoを連携するためのテンプレート</span>が用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
WebflowとKlaviyoのAPIを連携させれば、これまで手作業で行っていた二つのツール間でのデータ転記作業を自動化できます。
例えば、Webflowに新しいアイテムを公開した際に、その情報を自動でKlaviyoのプロフィールに反映させるといったことが可能になり、手作業による手間やミスを削減できます。
ここでは具体的な自動化の例を複数ご紹介しますので、気になる内容があれば、ぜひクリックしてみてください！
Webflowで新しいアイテムが公開されるたびに、その内容から必要なテキスト情報だけを<span class="mark-yellow">AIなどを活用して自動で抽出し、Klaviyoに新しいプロフィールとして登録</span>できます。
手作業による転記の手間や入力ミスを減らし、迅速な顧客情報管理に繋げられるでしょう。
Webflow上のアイテム情報が更新された際に、その変更を自動で検知し、<span class="mark-yellow">関連するKlaviyoのプロフィール情報も更新</span>します。
これにより顧客データを最新の状態に保ち、コミュニケーションの齟齬を防ぎます。
それでは、さっそく実際にWebflowとKlaviyoを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードでWebflowとKlaviyoの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回はWebflowでアイテムが公開されたら、テキストを抽出してKlaviyoでプロフィールを作成するフローを作成していきます！
作成の流れは大きく分けて以下です。
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
それではここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
アカウント名にはメールアドレスなど任意の名前を、アクセストークンはWebflowにログインして発行し、ペーストします。
任意のアカウントでWebflowにログインし、「Site Settings」をクリックして表示される以下の画面から「Generate API token」をクリックします。
発行するAPIトークンに任意の名前を設定し、「CMS」と「Site」の項目で「Read and Write」の権限を設定してから発行してください。
発行されたAPIトークンをコピーして、Yoomの連携画面に貼り付けて「追加」ボタンを押せばWebflowとの連携は完了です！
任意のKlaviyoアカウントでログインし、以下の画面で「Continue」をクリックしてください。
次に、Klaviyoへのアクセス権限を確認する画面が表示されます。最下部までスクロールして「Allow」をクリックしましょう。
「マイアプリに登録しました。」と表示されれば、Klaviyoとの連携は完了です！
Yoomには様々なアプリを活用した自動化のテンプレートが用意されています。今回は以下のテンプレートを試してみましょう。
Yoomにログインした状態で、バナーの「試してみる」をクリックしてみてください。
自動でYoomの画面に遷移して、以下のポップアップが表示されたらテンプレートのコピーは成功です！「OK」をクリックして次のステップに進みましょう。
Yoomのフローボットを動かす引き金となるアクションのことを「アプリトリガー」と呼びます。
このフローボットでトリガーになっている、Webflowの「コレクションのアイテムが公開されたら」というアクションを設定していきましょう。
まずはタイトルを任意で設定し、Webflowと連携するアカウントやアクション内容を確認したら「次へ」を押してください。
トリガーの起動間隔を設定していきましょう。プルダウンをクリックして、任意のタイミングを選んでください。
「サイトID」には、マイアプリ連携をしたWebflowアカウントから候補として表示されるサイトを選びます。
「コレクションID」にはアイテムが登録・公開される予定の、Webflow内のコレクションを候補から選んでください。
ここで一度Webflowにログインし、該当サイトのCMSでコレクションにテスト用のアイテムを追加・公開しましょう。
これで「コレクションのアイテムが公開されたら」というアプリトリガーの条件が整います。
Webflow側の準備ができたら、Yoomの設定画面に戻って「テスト」ボタンを押してみてください。
「取得した値」として、Webflowに公開されたテスト用アイテムの情報が以下のように反映されていれば成功です！
Yoomではこの「取得した値」を、フローボット内の他のアクションで活用できる「アウトプット」と定義しています。
取得した値（アウトプット）について
【Tips】
アウトプットは各アクションで取得でき、取得したアウトプットはそれ以降のアクションで活用可能です。
つまり、各アクションで取得したアウトプットをKlaviyoに自動登録可能となります！
また、後でKlaviyoにプロフィールを作成することを想定して、上記よりも多くの情報をWebflowのカスタムフィールドから取得しておきましょう。
「取得した値を追加する方法」を参考にしながら、今回は以下5つの取得した値を追加しました。
ここまで設定できたら、「保存する」ボタンを押しましょう。
Webflowに公開されているアイテムの情報から、Klaviyoのプロフィール作成に必要な情報を抽出する設定を行います。
YoomのAI機能の1つである、「データの抽出」を設定していきます。
タイトルは任意で設定し、「変換タイプ」は抽出元となるテキストの文字数に応じて選びましょう。
処理する文字数を増やすこともできますが、その場合は消費するタスク数も増えていくため注意してください。
設定できたら「次へ」を押して進みます。
まずは「抽出対象となるテキスト」を、取得した値＝先ほど取得したアウトプットから選択しましょう。
今回の例では、Webflowのカスタムフィールドで同じフィールド内に記載されている「名前」を、姓と名に分けていきます。
【Tips】
このようにアウトプットを活用することで、フローが起動する度に最新のWebflowのデータから必要なデータを抽出可能となります。
次に「抽出したい項目」を、カンマ区切りで入力してください。ここでは姓と名を分けるため、以下のように入力します。
最後に「指示内容」を入力しましょう。各項目をどのようなルールで抽出するのか、AIに分かりやすいような指示を設定します。
今回は例として、以下のように入力してみました。
もしもAIを使用したデータの抽出設定で困ったことがあれば、こちらのページも参考にしてみてください。
設定できたら「テスト」ボタンを押してみましょう。AIへの指示が成功していれば、取得した値に必要な情報だけがしっかり抽出されています。
ここまで設定できたら「保存する」をクリックしてください。
ここまでのアクションによって、Klaviyoで作成するプロフィールに必要な情報が集められました。
いよいよ集めた情報を使ってプロフィールを作成するアクションを設定していきましょう。
タイトルを任意で設定し、Klaviyoと連携するアカウントやアクション内容を確認したら「次へ」を押してください。
Klaviyoのプロフィールを作成する設定をしていきましょう。
例えば「個人のメールアドレス」は、Webflowから取得した値を用いることで以下のように設定できます。
【Tips】
テキストを直接入力した部分は固定値とされるため、アウトプットを活用せず設定を行うと毎回同じデータが登録されてしまうので注意が必要です。そのため、各ボックスへデータを挿入する際はアウトプットを活用しましょう。
同じ要領で、以下3つはWebflowから取得した値を使って設定できますね。
前ステップでAIを使って抽出した「姓」と「名」も、取得した値から設定しましょう。
他にも設定できる項目があるため、必要に応じて設定してみてください。
必要な設定ができたら、「テスト」ボタンを押してみましょう。Klaviyoで作成されたプロフィールの情報が、取得した値に反映されていれば成功です。
Klaviyoの方も確認してみましょう。Webflowのカスタムフィールドを反映したプロフィールが作成されています！
ここまで確認できたら「保存する」をクリックしましょう。
お疲れさまでした！すべての必要な設定を完了すると、以下のポップアップが表示されます。「トリガーをON」をクリックして、フローボットを動かしはじめましょう。
これで、Webflowのコレクションにアイテムが追加・公開されたら、自動で必要な情報を反映したKlaviyoのプロフィールが作成されるようになりました。
今回はWebflowからKlaviyoへデータを連携する方法をご紹介しましたが、逆にKlaviyoからWebflowへのデータ連携を実施したい場合は、下記のテンプレートも併せてご利用ください。
顧客管理ツールであるKlaviyoの情報をWebサイトに反映させることで、パーソナライズされたコンテンツ提供などが可能になります。
Klaviyoで新しいプロフィールが作成されると、その情報を基に<span class="mark-yellow">Webflowに新しいアイテムを自動で追加</span>します。
これにより手動でのデータ入力作業をなくし、顧客情報を迅速にWebサイトへ反映させられます。
Klaviyo上のプロフィール情報が更新された際に、その変更を<span class="mark-yellow">Webflowの関連アイテムに自動で反映</span>させます。
手作業での更新漏れを防ぎ、一貫性のある最新情報をWebサイト上で提供し続けることに繋げられます。
WebflowやKlaviyoのAPIを活用することで、Webフォームの管理や顧客コミュニケーション業務をスムーズに効率化できます。
Yoomにはこれらの業務を自動化できるテンプレートが多数用意されているので、ぜひご活用ください！
Webflowでの自動化を導入することで、フォーム送信や注文管理、データ同期が効率化できるでしょう。
例えば、Webflowのフォームや注文情報を他のツールと連携することで、手作業の入力作業を減らせます。Web担当者やECサイト運営者に特に有効で、社内通知やデータ整理もスムーズに進められるはずです！
Klaviyoによる自動化は、メールやSMSの管理、顧客情報の同期を効率化します。
例えば、顧客の行動に応じて他システムに通知したり、プロフィール情報を自動作成することで、マーケティング担当者の作業負荷軽減が期待できます！
キャンペーン運用や顧客対応のスピード向上になる可能性もあるでしょう。
WebflowとKlaviyoの連携を自動化することで、<span class="mark-yellow">これまでWebサイトの更新情報をもとに手作業で行っていた、顧客プロファイルの作成や更新といった定型業務から解放され、ヒューマンエラーのリスクを減らしつつマーケティング活動の初動を高速化</span>できます。
これにより、担当者は単純なデータ入力作業ではなく、顧客とのエンゲージメントを高めるための戦略立案やコンテンツ作成といった、創造的なコア業務に集中できる環境を整えられるでしょう！
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築可能です。
もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください！
Q：テキスト以外のデータ（画像など）も連携できますか？
はい、URLでの連携可能です。
上記の手順で、WebflowからKlaviyoに画像URLを連携できます。
Q：連携が失敗した場合、どうなりますか？
Yoomでは進行していたフローボットがエラーとなり、停止された場合にワークスペース発行時に登録したメールアドレス宛に通知が届きます。
また、アクション設定時の「テスト」ボタンでもエラーがあれば内容が表示されます。
その際には該当フローを確認し、エラーの原因や種類が表示される「エラーコード」を確認して修正してください。
詳しくは「エラー時の対応方法」をご確認ください。ヘルプページで解決しない場合は、サポート窓口を利用することもできます。
Q：Webflowのアイテムを削除した場合、Klaviyoのプロフィールも自動で削除されますか？
ご紹介したテンプレートではWebflowでアイテムが削除された場合でも、自動でKlaviyoからプロフィールが削除されることはありませんが、別途「Webflowのコレクションからアイテムが削除されたら」というアプリトリガーでフローボットを作成することで実現可能です。
.png)
.png)
.png)
.webp)
.webp)
