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

# 概要
[AMIMOTO + Amazon Elasticsearch ServiceでWordPressの検索機能をパワーアップ](http://qiita.com/horike37/items/b8ce9b2893f81c785683)でWordPressの検索をElasticsearch Serviceで行う方法を書きましたが、これをWooCommerceの商品検索に適用して、検索ワードごとの売上の相関を可視化させたいと思います。

# アーキテクチャ
![Untitled.png](https://qiita-image-store.s3.amazonaws.com/0/65478/25286f77-2882-b6ed-4121-64788998126d.png)

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

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

```php
<?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
<img width="941" alt="スクリーンショット 2016-03-06 20.48.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/65478/497816bc-5bcb-c0f9-5c00-f4f03af503b2.png">
`search_word`と`total_value`をクエリとして受け取るようにしてあげます。そのままバックエンドのLambdaファンクションに投げます。

## DynamoDBのデータを取得するAPI
<img width="928" alt="スクリーンショット 2016-03-06 20.56.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/65478/9b63c90b-cbf5-05f3-f950-db26b6df6c01.png">
そのままDynamoDBのscanでデータ取得するLambdaファンクションに処理を投げます。

# Lambdaファンクション
## 検索ワードと売り上げ金額をDynamoDBに投入するLambdaファンクション
```js
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のデータを取得する
```js
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をハッシュキーとして設定して売上金額を保存します。
<img width="334" alt="スクリーンショット 2016-03-06 21.01.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/65478/cc19cf86-2668-e894-1307-456992dbde0e.png">

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

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

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

```shell-session
{
    "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"
            }
        }
```

するとこんな感じで管理画面でデータを見れるようになります。
<img width="1242" alt="スクリーンショット 2016-03-06 20.19.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/65478/a28afa10-4b32-9206-ec76-d3a929f0e791.png">