概要

AMIMOTO + Amazon Elasticsearch ServiceでWordPressの検索機能をパワーアップでWordPressの検索をElasticsearch Serviceで行う方法を書きましたが、これをWooCommerceの商品検索に適用して、検索ワードごとの売上の相関を可視化させたいと思います。

アーキテクチャ

注文完了画面にてjsタグを貼り、API Gatewayにデータを送信して検索ワードと売上データをDynamoDBに格納します。可視化部分でも同様にAPI Gatewayにリクエストを送ってDynamodbのデータを取得してグラフ化します。

注文完了画面にタグを設置

注文完了画面では、woocommerce_thankyouというフックを通ります。
そのフックで、cookieに保存していたユーザが使用した検索ワードと売り上げ金額をAPI Gatewayで作ったエンドポイントにわたしてあげます。

<?php
add_action( 'woocommerce_thankyou', ( $order_id ) {
    $order = wc_get_order($order_id);
?>
<script type="text/javascript">
    jQuery(document).ready(function($){
        var wc_esf_total_value = '<?php echo $order->calculate_totals(); ?>';

        if ( $.cookie('elasticommerce_search_query') && wc_esf_total_value != '' ) {
            $.get( '<API Gateway エンドポイント>', { 'search_word':$.cookie('elasticommerce_search_query'),'total_value':wc_esf_total_value } );
            $.removeCookie('elasticommerce_search_query');
        }   
    });
</script>
<?php
});

API Gatewayの設定

検索ワードと売り上げ金額をDynamoDBに投入するAPI
DynamoDBのデータを取得するAPI この2種類のAPIを作ってあげます。

検索ワードと売り上げ金額をDynamoDBに投入するAPI

search_wordとtotal_valueをクエリとして受け取るようにしてあげます。そのままバックエンドのLambdaファンクションに投げます。

DynamoDBのデータを取得するAPI

そのままDynamoDBのscanでデータ取得するLambdaファンクションに処理を投げます。

Lambdaファンクション

検索ワードと売り上げ金額をDynamoDBに投入するLambdaファンクション

var doc = require('dynamodb-doc');
var dynamo = new doc.DynamoDB();

exports.handler = function(event, context) {
    var dynamoRequest = {
        TableName: 'search_word_total_value',
        Item: {
            'search_word':event.search_word,
            'total_value':event.total_value
        }
    };
    dynamo.putItem(dynamoRequest, context.done);
};

DynamoDBのデータを取得する

var doc = require('dynamodb-doc');
var dynamo = new doc.DynamoDB();

exports.handler = function(event, context) {
    var dynamoRequest = {
        TableName: 'search_word_total_value'
    };
    dynamo.scan(dynamoRequest, context.done);
};

DynamoDBの設定

search_word_total_valueというテーブルを作ります。
search_wordをハッシュキーとして設定して売上金額を保存します。

可視化

WordPressに以下のような処理をいれてデータを取ってきます。

$response = wp_remote_get('<DynamoDBのデータを取得するAPIへのエンドポイント>');
        if( !is_wp_error( $response ) && $response["response"]["code"] === 200 ) {
// グラフ化処理
}

APIにリクエストを送ると以下の様なjsonが返ってくるのでこのデータを元に可視化してあげましょう

{
    "Count": 9, 
    "Items": [
        {
            "search_word": {
                "S": "カスタネット"
            }, 
            "total_value": {
                "S": "1400"
            }
        }, 
        {
            "search_word": {
                "S": "korg"
            }, 
            "total_value": {
                "S": "21000"
            }
        }, 
        {
            "search_word": {
                "S": "フェイス"
            }, 
            "total_value": {
                "S": "1545"
            }
        }

するとこんな感じで管理画面でデータを見れるようになります。

WooCommerceで作ったECサイトの売上データをAmazon API Gateway + Lambda + Dynamodbで可視化する

概要