Merge branch 'feature/new-goods' into 'release/5.4'

新品到着 埋点



See merge request !140

@@ -77,7 +77,7 @@ const getSearchData = (params) => {
 
             newList.list = productProcess.processProductList(result.data.product_list || [], {showTags: true});
 
-            if (parseInt(params.page) === 1) {
+            if (parseInt(params.page, 10) === 1) {
                 newList.total = result.data.total;
             }
 

@@ -2,6 +2,7 @@
     {{!--浏览过的品牌--}}
     {{#if browseBrands}}
         {{> new/recommend-brands
+            id="browse-brands"
             title="浏览过的品牌"
             shops=browseBrands
         }}
@@ -9,12 +10,14 @@
 
     {{!--热门品牌--}}
     {{> new/recommend-brands
+        id="hot-brands"
         title="热门品牌"
         shops=hotBrands
     }}
 
     {{!--新入驻品牌--}}
     {{> new/recommend-brands
+        id="new-brands"
         title="新入驻品牌"
         style="new-brands"
         shops=newBrands

 {{!--新品到着 品牌推荐--}}
 {{#each shops}}
-<div class="brand-news-count">
+<div class="brand-news-count" 
+    {{#if brand_id}} data-brand="{{brand_id}}" {{/if}}
+    {{#if shops_id}} data-shop="{{shops_id}}" {{/if}}
+>
     <div class="brand-logo">
         <img src="{{image shop_logo 186 115}}" alt="{{shop_domain}}">
         <h5>{{shop_name}}</h5>

-<div class="good-info">
+<div class="good-info" data-type="guang-article" data-id="{{id}}">
     <div class="guang-article">
         <a href="{{url}}">
         {{guangType category_id}}

 {{!-- 商品列表中的 品牌上新--}}
-<div class="good-info brand-info">
+<div class="good-info brand-info" data-type="hot-shop" data-brand="{{brand_id}}" data-shop="{{shop_id}}">
     <img src="{{image shop_logo 240 100}}" alt="{{shop_name}}">
     <h5 class="bname">{{shop_name}}</h5>
     <p class="summary">上新<span class="red">{{new_product_num}}</span>件&nbsp;&nbsp;<span class="red">{{favorite_num}}</span>人收藏</p>

@@ -8,7 +8,7 @@ brand-tags   热门品牌 【已废除】
 
 @param tags  ul 的数据
 --}}
-<div class="good-info good-tags {{kind}} ">
+<div class="good-info good-tags {{kind}}" data-type="{{kind}}">
     <div>
         <ul class="good-tags-list">
             {{#each tags}}
@@ -24,7 +24,7 @@ brand-tags   热门品牌 【已废除】
 {{!--
     TODO： 如果要搜索品类，修改这里，目前是query查询
 --}}
-<li>
+<li data-cate="{{categoryId}}">
     <a href="//search.m.yohobuy.com/?query={{encodeURIComponent categoryName}}&from=search" class="good-tag">{{categoryName}}</a>
 </li>
 {{/inline}}

@@ -9,6 +9,8 @@ let lazyLoad = require('yoho-jquery-lazyload');
 
 let filter = require('plugin/filter');
 
+let $callback = $.Callbacks(); // eslint-disable-line
+
 new Swiper('.handpick-swiper', {
     // Optional parameters
     lazyLoading: true,
@@ -178,10 +180,14 @@ let searchView = function() {
             goods: data
         });
 
+
+
         $container.append(html);
 
 
         lazyLoad(html);
+
+        return html;
     }
 
     /**
@@ -223,7 +229,12 @@ let searchView = function() {
                 searchParams.page.total = res.pageTotal;
                 searchParams.page.cur = page.cur + 1;
 
-                renderGoods($box, res.list);
+                let html = renderGoods($box, res.list);
+
+
+                $callback.fire(html, searchParams);
+
+
             })
             .always(() => {
                 $loading.remove();
@@ -274,12 +285,177 @@ let searchView = function() {
 
     return {
         fetchNew,
-        switchNav
+        switchNav,
+        searchParams
     };
 };
 
+let search = searchView();
+
+
+
+// analysis
+
+// 两个轮播 获取 分析的数据
+function _swiperData($item, bool) {
+    let $img = $item.find('img');
+    let $anchor = $item.find('a');
+
+    if (bool) {
+        return {
+            IMAGE_URL: $img.attr('src') || $img.attr('data-atrr'),
+            ACTION_URL: $anchor.attr('href')
+        };
+    } else {
+        return {
+            F_URL: $anchor.attr('href')
+        };
+    }
+}
+
+// 楼层分析配置
+let analysisMap = {
+    'banner-top': {
+        container: '.banner-top', // floor容器
+        item: '.swiper-slide',  // floor item
+        floorInfo: {F_NAME: 'banner', F_ID: '0'}, // analysis 信息
+
+        extraAttrs: _swiperData // 从item 获取 额外字段
+    },
+
+    'new-recommend': {
+        container: '#new-recommend',
+        item: '.brand-news-count',
+        floorInfo: {F_NAME: '为您推荐', F_ID: '1'},
+
+        extraAttrs: function($item) {
+            return {
+                BRAND_ID: $item.data('brand'),
+                SHOP_ID: $item.data('shop')
+            };
+        }
+    },
+
+    handpick: {
+        container: '#handpick',
+        item: '.swiper-slide',
+        floorInfo: {F_NAME: '精选抢先看', F_ID: '2'},
+
+        extraAttrs: _swiperData
+    },
+
+    'new-goods': {
+        container: '#new-goods',
+        item: '.good-info',
+        floorInfo: {F_NAME: '最新上架', F_ID: '3'},
+
+
+        /**
+         *  $item .good-info
+         *  $target recommend-type 里面的<a>
+         */
+        extraAttrs: function($item, $target) {
+            let type = $item.data('type');
+            let _attrs = {};
+
+            $target = $target instanceof $ && $target;
+
+            function tagsStr(_$item, handler, $_target) {
+                let $li;
+
+                if (!$_target) {
+                    $li = _$item.find('li');
+                } else {
+                    $li = $_target.closest('li');
+                }
+
+                return [].map.call($li, handler).join();
+            }
+
+            function tagIndex(arr, $_target) {
+                if ($_target) {
+                    arr.L_INDEX = $_target.index();
+                }
+            }
+
+            let handler;
+
+            switch (type) {
+                case 'guang-article':
+                    _attrs = {
+                        RECOMMEND_TYPE: 'fashionArticle',
+                        ARTICLE_ID: $item.data('id')
+                    };
+                    break;
+                case 'season-tags':
+                    handler = li => $(li).data('cate');
+                    _attrs = {
+                        RECOMMEND_TYPE: 'seasonSort',
+                        CATE_ID: tagsStr($item, handler, $target)
+                    };
+
+                    tagIndex(_attrs, $target);
+                    break;
+                case 'search-tags':
+                    handler = li => $(li).find('a').text();
+                    _attrs = {
+                        RECOMMEND_TYPE: 'hotSearchTerm',
+                        KEYWORD_WORD: tagsStr($item, handler, $target)
+                    };
+
+                    tagIndex(_attrs, $target);
+                    break;
+                case 'hot-shop':
+                    _attrs = {
+                        RECOMMEND_TYPE: 'hotShop',
+                        BRAND_ID: $item.data('brand'),
+                        SHOP_ID: $item.data('shop')
+                    };
+                    break;
+                default:
+                    _attrs = {
+                        PRD_SKN: $item.data('id')
+                    };
+                    break;
+            }
+
+            if ($target) {
+                _attrs.SORT_NM = search.searchParams.order;
+                _attrs.FILTER_VALUE = search.searchParams.filter;
+            }
+
+            return _attrs;
+        }
+    }
+};
+
+let analysis = require('./new/analysis');
+let analysisWorker = require('./new/new-arrival-analysis');
+
+
+let {analysisShowData} = analysisWorker(analysisMap, 'YB_NEW_ARRIVAL_FLR_C');
+
+
+// 最新上架 的 每页的曝光数据，发送给yas
+$callback.add(function(html, searchParams) {
+    let pageData = analysisShowData('new-goods', {container: $(`<div>${html}</div>`)});
+
+    pageData.SORT_NM = searchParams.order;
+    pageData.FILTER_VALUE = searchParams.filter;
+
+    analysis('YB_SHOW_NEW_ARRIVAL', {data: pageData});
+});
+
+$(function() {
+    setTimeout(()=> {
+        // 新品到着页面曝光时的页面数据，异步的单独发
+        analysis('YB_SHOW_NEW_ARRIVAL', {
+            data: ['banner-top', 'new-recommend', 'handpick'].map(analysisShowData)
+        });
+    }, 1000);
+});
+
 
-window.search = searchView();
 window.filter = filter;
 window.$ = $;
 

@@ -3,3 +3,47 @@
  */
 require('product/new-brands.page.css');
 require('common');
+
+
+let extraAttrs = ($item) => {
+    return {
+        BRAND_ID: $item.data('brand'),
+        SHOP_ID: $item.data('shop')
+    };
+};
+
+// analysis
+let analysisMap = {
+    'browse-brands': {
+        container: '#browse-brands',
+        item: '.brand-news-count',
+        floorInfo: {F_NAME: '浏览过的品牌', F_ID: '0'},
+        extraAttrs
+    },
+    'hot-brands': {
+        container: '#hot-brands',
+        item: '.brand-news-count',
+        floorInfo: {F_NAME: '热门品牌', F_ID: '1'},
+        extraAttrs
+    },
+    'new-brands': {
+        container: 'new-brands',
+        item: '.brand-news-count',
+        floorInfo: {F_NAME: '新入驻品牌', F_ID: '2'},
+        extraAttrs
+    }
+};
+
+let analysis = require('./new/analysis');
+let analysisWorker = require('./new/new-arrival-analysis');
+
+let {analysisShowData} = analysisWorker(analysisMap, 'YB_NEW_ARRIVAL_RECOMMEND_FLR_C');
+
+$(function() {
+    setTimeout(()=> {
+        // 新品到着页面曝光时的页面数据，异步的单独发
+        analysis('YB_SHOW_NEW_ARRIVAL_RECOMMEND', {
+            data: ['browse-brands', 'hot-brands', 'new-brands'].map(analysisShowData)
+        });
+    }, 1000);
+});

+/**
+ *  @param [string]     eventName 埋点事件名
+ *  @param [object]     param  参数，请根据文档，C_ID 不用传，已做处理
+ */
+module.exports = (eventName, param) => {
+    var yas = window._yas;
+    var channel = ({
+        boys: 1,
+        girls: 2,
+        kids: 3,
+        lifestyle: 4
+    })[window.cookie('_Channel')];
+
+    param.C_ID = channel;
+    param = JSON.stringify(param);
+
+    if (yas && yas.sendCustomInfo) {
+        yas.sendCustomInfo({
+            op: eventName,
+            param
+        }, true);
+    }
+};
\ No newline at end of file

+let analysis = require('./analysis');
+
+/**
+ *   user: new-arrival.page.js, new-brands.page.js
+ */
+
+module.exports = function(analysisMap, clickEvent) {
+    $(function() {
+        // 给个楼层 a标签 配置click 事件
+        $.each(analysisMap, (key, config) => {
+            let container = config.container;
+            let _floorInfo = config.floorInfo;
+            let _item = config.item;
+
+
+            $(container).on('click', 'a', _floorInfo, function(event) {
+                let $anchor = $(event.currentTarget);
+                let $item = $anchor.closest(_item);
+
+                let iIndex = $item.index() + 1;
+                let fIndex = $(event.delegateTarget).index();
+
+                let extraAttrs = {
+                    F_URL: event.currentTarget.href
+                };
+
+                if ($anchor.hasClass('more')) {
+                    iIndex = 0;
+                }
+
+                // 不是more button, 并且有extraAttrs function
+                if (iIndex !== 0 && config.extraAttrs) {
+                    extraAttrs = config.extraAttrs($item, $anchor);
+                }
+
+
+                let param = $.extend({
+                    F_INDEX: fIndex,
+                    I_INDEX: iIndex
+                }, _floorInfo, extraAttrs);
+
+                analysis(clickEvent, param);
+            });
+        });
+    });
+
+    function _buildDataList(floor, item, extraAttrs, bool) {
+        let _list = [];
+
+        $(floor).find(item).each((i, elem)=> {
+            let obj = {
+                I_INDEX: i + 1
+            };
+
+            let _extraAttrs = extraAttrs($(elem), bool);
+
+            $.extend(obj, _extraAttrs);
+
+            _list.push(obj);
+        });
+
+        return _list;
+    }
+
+    // 分析楼层曝光数据
+    /**
+     *  @param string floor 楼层名称
+     *  @param object options 要覆盖的楼层配置
+     */
+    function analysisShowData(floor, options) {
+
+        let floorConfig = analysisMap[floor];
+
+        floorConfig = $.extend({}, floorConfig, options);
+
+        let floorInfo = floorConfig.floorInfo;
+        let extraAttrs = floorConfig.extraAttrs;
+        let container = floorConfig.container;
+        let item = floorConfig.item;
+
+        let floorData = $.extend({
+            LIST: [],
+        }, floorInfo);
+
+        floorData.LIST = _buildDataList(container, item, extraAttrs, true);
+
+        return floorData;
+    }
+
+
+    return {
+        analysisShowData // 曝光的数据
+    };
+};
+
+