Volusion と外部連携する方法

このページで学べること

Volusion を Klaviyo と連携する方法をご覧ください。これらの手順を完了すると、同期された注文データと顧客プロパティに基づいてメールをパーソナライズし、ターゲティングできるようになります。

Volusionから、Klaviyoは購入商品と注文の確定のメトリックをトラッキングします。この記事の追加コードを使用すると、チェックアウトの開始イベントもトラッキングして、カゴ落ちリマインダーをトリガーできます。

始める前に

Volusionでは、Volusionストアの管理者アカウントのパスワードを90日ごとに更新する必要があります。Volusionでこのパスワードを変更すると、Klaviyoの外部連携でも更新後のAPIキー/暗号化されたパスワードが必要になります。外部連携の認証情報の置き換えについてサポートが必要な場合は、トラブルシューティングセクション内のリンクからKlaviyoサポートにお問い合わせください。また、この記事の該当セクションの手順に従って、永続的なAPIキーを作成することもできます。

設定を開始する前に、VolusionストアのURL、管理者ログイン用メールアドレス、APIキー/暗号化パスワードをご用意ください。APIキーが必要な場合は、まず以下のVolusionで永続的なAPIキーを作成する方法に従ってください。また、Klaviyoで外部連携を管理する権限も必要です。

Klaviyo で Volusion 外部連携を追加する

1. Klaviyo で、[外部連携] タブを選択します。
2. [アプリを探す] を選択します。
3. Volusion を検索してカードをクリックし、インストール をクリックします。
4. 次のページで、ストアURL、ログインメール、APIキー/暗号化されたパスワードを入力してください。次に、Volusionに接続をクリックしてください。

5. 次のページで、Volusionでメール購読者としてマークされている顧客を、注文が同期されたときにKlaviyoのリストに追加したい場合は、新しいVolusionの顧客をKlaviyoリストに追加を選択してください。次に、リストを選択の下でリストを選択します。
6. 最後に、Complete setup をクリックします。

Klaviyoでメールからウェブサイトへのトラッキングを無効にする

ウェブサイトへのメールトラッキングにより、Klaviyoメールのリンクからウェブサイトにアクセスした訪問者を特定できます。

Volusion は、クリック トラッキングで使用している URL 形式をサポートしていないため、ユーザーがこれらのリンクのいずれかを通じてストアにアクセスしようとするとエラーが発生します。そのため、メール内のリンクが Volusion のストアに正しく遷移するようにするには、Klaviyo でこの機能を無効にする必要があります。

1. アカウント名をクリックし、設定 > メール > トラッキングを選択します。
2. メールからウェブサイトにアクセスのトラッキングをオンにして、保存をクリックしてください。

この設定を無効にすると、メール内のリンクでウェブサイト上の訪問者を識別できなくなります。オンサイトトラッキングでは、Klaviyoサインアップフォームや以下のチェックアウトスニペットなどを通じて、ブラウザ内で識別された訪問者にアクティビティを引き続き関連付けることができます。Volusionの注文の同期だけでは、訪問者のブラウザは識別されません。

Volusion ストアにオンサイトトラッキングを追加する

Klaviyoには、顧客に関する貴重な情報の収集に役立つオンサイトトラッキングスニペットが2つあります。

• 「サイトの訪問」
  このスニペットは、顧客がサイトにアクセスしたタイミングをトラッキングします。このスニペットは、「商品の閲覧」 などの他のスニペットを機能させるために、サイトに追加する必要があります。
• Viewed Product
  このスニペットは、顧客が特定の商品を閲覧したときをトラッキングします。ストアに Viewed Product のコードスニペットを追加することで、このイベントをトラッキングできます。

サイト上でアクティブのトラッキングを追加

ウェブサイトのすべてのページに表示されるように、以下の Klaviyo.js スニペットを追加してください。これにより、アクティブなサイト上トラッキングと Klaviyo フォームが有効になります。PUBLIC_API_KEY をKlaviyo 公開 API キーに置き換えてください。

<script type="application/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
<script type="text/javascript"> 
//Script to initialize Klaviyo object on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>

商品閲覧のトラッキングを追加

「商品閲覧」のトラッキングを有効にするには、以下のコードスニペットを Volusion のファイル エディターでストアのテンプレートページに追加する必要があります。ファイル エディターは、[デザイン] > [ファイル エディター] をクリックすると見つかります。

<script type="text/javascript">
// Check to see if the customer is on the product page before executing code.
    if ($("meta[property='og:type']").attr("content") == "product") {
        var klaviyo = window.klaviyo || [];
        // Function to track when a product is viewed
        var trackViewedProduct = function(item) {
            klaviyo.track("Viewed Product", item);
            klaviyo.trackViewedItem({
                "Title": item.ProductName,
                "ItemId": item.ProductID,
                "ImageUrl": item.ImageURL,
                "Url": item.URL,
                "Metadata": {
                    "Price": item.Price,
                    "Description": item.Description,
                    "CompareAtPrice": item.CompareAtPrice,
                    "YouSave": item.YouSave
                }
            });
        };
        var item = {}
        $.get(`/ProductDetails.asp?ProductCode=${global_Current_ProductCode}`, function(data) {
            var product_saleprice = $("table.colors_pricebox div.product_saleprice").length ?
                Number(`${$("table.colors_pricebox div.product_saleprice").text().trim().split("$")[1].split(".")[0]}.${$("table.colors_pricebox div.product_saleprice").text().trim().split("$")[1].split(".")[1].substring(0,2)}`) : null;
            var product_listprice = $("table.colors_pricebox div.product_listprice").length ?
                Number(`${$("table.colors_pricebox div.product_listprice").text().trim().split("$")[1].split(".")[0]}.${$("table.colors_pricebox div.product_listprice").text().trim().split("$")[1].split(".")[1].substring(0,2)}`) : null;
            var product_productprice = $("table.colors_pricebox div.product_productprice").length ?
                Number(`${$("table.colors_pricebox div.product_productprice").text().trim().split("$")[1].split(".")[0]}.${$("table.colors_pricebox div.product_productprice").text().trim().split("$")[1].split(".")[1].substring(0,2)}`) : null;
            var product_yousave = $("table.colors_pricebox div.product_yousave").length ?
                Number(`${$("table.colors_pricebox div.product_yousave").text().trim().split("$")[1].split(".")[0]}.${$("table.colors_pricebox div.product_yousave").text().trim().split("$")[1].split(".")[1].substring(0,2)}`) : 0;
            item = {
                "ProductName": $("meta[property='og:title']").attr("content"),
                "ProductID": global_Current_ProductCode,
                "Description": $("meta[property='og:description']").attr("content"),
                "ImageURL": $("meta[property='og:image']").attr("content"),
                "URL": $("meta[property='og:url']").attr("content"),
                "Price": product_saleprice ? product_saleprice : product_productprice,
                "CompareAtPrice": product_listprice ? product_listprice : product_productprice,
                "YouSave": product_yousave
            };
            trackViewedProduct(item);
        });
    } 
</script>

カゴ落ちリマインダーを追加

Volusion では、外部連携を通じてカゴ落ちをトラッキングするための標準的な方法は提供されていませんが、Volusion ストアに追加できるカスタムスクリプトを作成しました。これにより、Klaviyo でこの機能を使用できるようになります。これには、ショップのテンプレートにコードを追加するための知識がある程度必要です。そのため、デベロッパーがいる場合は、このドキュメントを共有して、コードの追加手順を確認してもらうことができます。

1. 上記のKlaviyo.jsスニペットを追加した後、以下のチェックアウトスニペットを、Volusionのファイルエディタ（Design > File Editor）内にあるストアのテンプレートページに追加し、変更を保存してください。

<script type="text/javascript">
    // Check to see if the customer is on the checkout page before executing code.
    if (window.location.pathname == "/one-page-checkout.asp") {
        var klaviyo = window.klaviyo || [];
        // Function to track when a checkout is started.
        var trackStartedCheckout = function() {
            $.post('/AjaxCart.asp', function(data) {
                if (!data || !data.Products || !data.Products.length) {
                    return;
                }
                var items = [],
                    names = [],
                    skus = [];
                // Grab each product and its SKU/Name/Quantity/Price/Total price/Image url
                $.each(data.Products, function(i, record) {
                    var item_price = +(record.ProductPrice.replace(/[\$,]+/g, '')) / record.Quantity;
                    items.push({
                        SKU: record.ProductCode,
                        Name: record.ProductName,
                        Quantity: +record.Quantity,
                        ItemPrice: item_price,
                        RowTotal: item_price * record.Quantity,
                        ImageURL: record.ImageSource
                    });
                    names.push(record.ProductName);
                    skus.push(record.ProductCode);
                });
                // Push Started Checkout metric to Klaviyo with the customers data.
                klaviyo.track("Started Checkout", {
                    $value: +(data.Totals[0].CartTotal.replace(/[\$,]+/g, "")),
                    Items: items,
                    ProductNames: names,
                    SKUs: skus
                });
            }, 'json');
        };
        $(function() {
            // Grab the email form to get your customers email and tie the event to that email in Klaviyo.
            $('[name="OnePageCheckoutForm"] [name="Email"]').change(function(e) {
                var email = $(this).val();
                // Do some light validation. Klaviyo will do more validation when the data is received.
                if (email && /@/.test(email)) {
                    klaviyo.identify({
                        $email: email
                    });
                    trackStartedCheckout();
                }
            });
        });
} </script>

このコードで今後のチェックアウトイベントのみを追跡できるようになります。Klaviyo 内のカゴ落ちフローをバックフィルすることはできません。

1. カートに商品を入れた状態で、1ページチェックアウトをテストしてください。有効なメールアドレスを入力してから、メールフィールドを離れてください。Klaviyoで分析>メトリックを開き、チェックアウトの開始を探してください。このイベントはメールフィールドの変更によってトリガーされ、カゴ落ちフローをトリガーするために使用できます。

Klaviyo 同期を監視する

1. Volusionと連携すると、Klaviyoはデータを同期し、使用できる状態になるまでに時間が必要です。同期を確認するには、外部連携を開き、Volusionを選択して、データタブを開きます。
2. 履歴データで、同期の進捗を確認してください。ストアの規模が大きいほど、同期に時間がかかる場合があります。インポートが完了すると、このセクションで、履歴注文と顧客の同期が完了したことを確認できます。
3. 外部連携を初めて有効にすると、Klaviyoは過去の注文と、それらに関連付けられた顧客データをインポートします。同期が完了したら、特定の日の注文数をVolusionのインターフェースと比較してください。たとえば、Klaviyoの アナリティクス>メトリック にある 注文の確定 メトリックを確認する場合は、昨日のデータポイントにマウスオーバーするか、グラフの下にあるデータ表を確認して、昨日報告された注文数を確認できます。
4. その数値を、同日のVolusionの注文数と比較してください。合計が一致しない場合は、同期が完了していることと、タイムゾーンが一致していることを確認してください。Klaviyoでは、支払い金額がない注文や、有効な顧客のメールアドレスがない注文もスキップされるため、差異があっても必ずしもタイムゾーンの問題とは限りません。
5. アカウントのタイムゾーンを確認または更新するには：
   1. 左下のアカウント名をクリックしてください。
   2. 設定 > 一般 > アカウントを選択します。
   3. タイムゾーンまでスクロールしてください。選択内容を変更した場合は、保存をクリックしてください。

Volusion から同期されたデータ

アカウント内のすべてのメトリックを確認するには、[アナリティクス] > [メトリック] に移動してください。Volusion アイコンが付いたメトリックは、Volusion 外部連携から同期されます。初回同期の後、Klaviyoは新しい注文と、それに関連付けられた顧客プロパティを1時間ごとに確認します。

注文の確定

このイベントは、KlaviyoがVolusionストアから支払い金額と有効な顧客のメールアドレスを含む注文を同期したときに追跡されます。このイベントでは、注文の元の日時が使用されます。注文の確定イベントには、商品名、商品コード、画像、価格情報など、購入された商品の関連情報がすべて含まれるため、それらの情報を購入後のフォローアップメールに活用できます。

購入商品

このイベントは、注文で購入された各個数ごとにトラッキングされます。たとえば、Tシャツとパンツを購入した場合、1件の注文の確定イベントがトラッキングされ、2件の購入商品イベント（Tシャツ分の1件とパンツ分の1件）がトラッキングされます。同じTシャツを2枚購入した場合、Klaviyoでは購入商品イベントも2件記録されます。

購入商品イベントには、購入された各商品の詳細情報が含まれます。これは、購入された商品に基づいて行動セグメントを作成する際に役立ちます。以下の条件に基づいて、「購入商品」イベントをフィルタリングし、ターゲットを絞ることができます。

• Name
  Volusion における商品の名前またはタイトル（例：T シャツ）。
• 商品コード
  Volusion 内の商品の商品コード。
• 数量
  購入された各ユニットごとにKlaviyoが個別のイベントを記録するため、各「購入商品」イベントの値は1になります。

Volusion から同期された顧客データ

VolusionからKlaviyoに同期される上記のメトリックに加えて、各Klaviyoプロファイルに追加される顧客プロパティもあります。これらのプロパティは、セグメントおよびフローで使用できます。Volusionから自動的に同期されるプロパティは以下のとおりです：

• メール
• 名
• 姓
• 市区町村
• 州・県/地域
• 郵便番号
• 国
• 電話番号
• ソース（Klaviyo は、プロファイルのソースプロパティを「Volusion」に設定して、Volusion からの顧客をトラッキングします）

トラブルシューティング

Volusion の Placed Order データが Klaviyo でレポート作成されない

これは、データのエクスポートを許可する Volusion API 設定に問題がある可能性があります。

1. これを修正するには、Volusion 管理パネルの「インベントリ」タブに移動します。ドロップダウン メニューから「インポート/エクスポート」を選択します。
   

2. メイン API ページにアクセスするには、Volusion API をクリックしてください。
3. Generic セクションで、ストアの Generic/Orders のエクスポートを 実行 するオプションが表示されます。エクスポートが実行されると、ページが更新されます。
   

4. * という名前の列にあるチェックボックスをクリックしてすべての列を選択し、Run をクリックします。
   

5. 実行 をクリックして Generic Orders をエクスポートすると、ページ上部に API URL が生成されます。例えば、URL は https://storename.com/net/WebService.aspx?Login=user@storename.com&EncryptedPassword=ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789&EDI_Name=Generic%5COrders のように表示されます。
   

6. EncryptedPassword=の後、次の&の前にある値がAPIキーです（上のスクリーンショットでハイライト表示されています）。Klaviyo外部連携で認証情報の更新が必要な場合は、次のステップのサポートリンクを使用して、置き換えに関するサポートを受けてください。
7. エクスポート設定と認証情報を修正したら、次の1時間ごとの同期が実行されるのを待ってから、アナリティクス>メトリックを開きます。Volusionの注文の確定メトリックの最近のアクティビティを表示して、新しいデータが同期されたかどうかを確認してください。注文がまだ不足している場合、または新しい注文が表示されない場合は、同期の復元と注文履歴の欠落の補完についてサポートを受けるために、サポートチームにお問い合わせください。
8. Volusion API を使用してデータをエクスポートする方法の詳細については、Volusion サポートを参照してください。

メールリンクをクリックすると「無効な入力」エラーが表示されます

ウェブサイトへのメールトラッキングにより、Klaviyoメールのリンクからウェブサイトにアクセスした訪問者を特定できます。

Volusion は、クリック トラッキングで使用している URL 形式をサポートしていないため、ユーザーがこれらのリンクのいずれかを通じてストアにアクセスしようとするとエラーが発生します。そのため、メール内のリンクが Volusion のストアに正しく遷移するようにするには、Klaviyo でこの機能を無効にする必要があります。

この問題を解決するには、この記事の冒頭で説明されているとおり、設定>メール>トラッキングでメールからウェブサイトへのトラッキングを無効にしてください。

Volusion で永続的な API キーを作成する方法

通常、Volusionでは、アカウントのパスワードをリセットする際に90日ごとにAPIキーのリセットが必要となるため、KlaviyoでVolusion外部連携を再設定する必要があります。代わりに期限のないAPIキーを作成するための手順を以下に示します。これには、決してログインしない管理者アカウント用のAPI認証情報を生成する作業が含まれます：

1. Volusion の管理パネルから [Customers] > [Administrators] に移動し、新しい管理者アカウントを作成します。
2. Inventory > Import/Export に移動し、Volusion API タブを選択します。
3. [一般] セクションで、[Volusion API Integration Help] のリンクをクリックします。
4. エクスポートを選択し、ドロップダウンから作成した新しい管理者を選択します。
5. 「クエリ文字列付き URL...」ボックスを展開して、固定 URL、ログイン、暗号化されたパスワード（API キー）を確認します。

このアカウントではログインしないでください。API アクセス専用に使用されます。このアカウントでログインすると、パスワードは 90 日後に期限切れになり、新しい永続 API キーを生成するためにこれらの手順をやり直す必要があります。

達成できること

これで、Klaviyo を Volusion と統合し、オンサイト トラッキングを追加し、同期済みデータを確認し、永続的な API キーの作成方法を学びました。

その他のリソース