ナレッジベース

この記事では、「Action RuleMatched」SDKメソッドの実装例について説明します。

この例は、Webサイトにボタンがあり、クリックするとActionRuleが一致するかどうかを確認します。持っている場合は、バッジが表示されます。

1.WebサイトにSDKメソッドを実装する

まず、Webサイトに「アクションルールが一致しました」APIメソッドを実装する必要があります。詳細はこちらをご覧くださいませ：https://docs.chatvisor.com/docs/jsapi06-other/#action-rule-matched

HTML

ここでバッジを作成し、ActionRuleが一致した場合にサイトに表示します。

    <span style="background-color:#93beff; display:none" id="actionRuleMatched">ActionRule Matched!</span>

一致するActionRulesをチェックするjsメソッドを呼び出すボタンも必要です。

    <button onclick="checkActionRulesMatched()">Check ActionRules matched</button>

JavaScript

ここでSDKメソッドを実装します。

配列を返すため、結果のサイズが1より大きい場合、少なくとも1つのルールが一致していることがわかります。その場合、バッジは表示されるように設定されます。

/** 
* perform check for matched ActionRules, show badge if any have matched, hide if none
*/
function checkActionRulesMatched() {
    // Action Rule Listeners
    CV.api.hasActionRuleMatched(function (result) {
        var notificationElement = document.getElementById("actionRuleMatched");
        if (result.length > 0) {
            notificationElement.style.display = "inline";
        } else {
            notificationElement.style.display = "none";
        }
    });
}

返される結果は文字列の配列であるため、特定の文字列を確認することもできます。このように、複数のActionRuleが存在する可能性があり、それぞれが異なる何かを引き起こす可能性があります。

ページとChatvisorがロードされた後、一致するActionRulesのチェックも自動的に実行する必要がある場合は、これらの条件が満たされたときにメソッドを実行するイベントリスナーを追加できます。

/** 
* perform check for matched ActionRules once page and CV loaded
*/
window.addEventListener('load', function () {
    if (!window.CVLoaded) {
        window.CVLoaded = checkActionRulesMatched;
    } else {
        checkActionRulesMatched();
    }
})

このチェックはロード直後に行われるため、後でのみ一致する一部のActionRuleは表示されませんのでご注意ください。たとえば、条件が「User on Page for X seconds」のActionRuleは、X秒が経過した後にのみ一致します。この時点で、このリスナーはすでにメソッドを実行しています。

2.ActionRuleの設定

次に、APIを利用するためのルールを設定する必要があります。 ActionRulesの設定に関する詳細はこちらをご覧くださいませ：https://docs.chatvisor.com/docs/config09_css_rules

状態

この例では、ルールは「営業時間内」という条件を特徴としており、現在の時刻が選択した営業時間内にある場合に一致します。この機能に関する情報はこちらをご覧くださいませ：https://docs.chatvisor.com/docs/config12_css_settings-tenant#opening-hours

もちろん、目的に合った条件の組み合わせを選択することもできます。

アクション

このActionRuleを一致するルールの配列に追加するには、アクション「Javascriptイベント」が必要です。

これは、この例のルールの設定方法です。現在の時刻が営業時間内の場合、ルールは「一致」としてマークされ、SDKメソッドを実行すると結果の配列に含まれるようになります。

3.結果を確認する

元々スタイル「display：none」が設定されていたバッジの例は、営業時間中に訪問したときに表示されるようになりました。