写在前面

项目里用到了百度广告，需求是对广告添加点击统计事件，但是如何统计呢，想了很久，也没有找到一个好的方法，于是去百度，但是很鸡肋呀，根本不符合我的需求。晚上下班回去，坐在电视前陪儿子看佩奇，突然灵机一动似乎有了方案，第二天马上尝试，终于成功了，效果不错的，特此记录一下。

如何统计iframe跨域点击事件呢？

我的思路是：

1、这个广告位分为2层，最外层设置成相对定位用来控制广告的样式
2、第二层第一个div用来创建广告位，样式由联盟广告控制
3、第二层第二个div是一个透明模板，用来监听点击事件，主要监听touch的三种状态。设置成绝对定位。
html代码如下：

<!-- 广告位 -->
            <div v-show="AdStatus" class="normal-ad">
                <div id="normal-ad" style="z-index=-1" ></div>
                <!-- 广告上层蒙版，用来监听点击事件 -->
                <div class="ads-mask" @touchstart="adsTouchStart($event)" @touchmove="adsTouchMove($event)" @touchend="adsTouchEnd($event)"></div>
            </div>

css样式如下：

 .normal-ad{
        position: relative;
        margin: -0.1rem auto 0.3rem auto;
        padding: 0 0.2rem;
        .ads-mask{
            position:absolute;
            top:0px;
            right:0px;
            width:100%;
            height:100%;
            z-index:99;
        }
        .hide{
            display: none;
        }
    }

上篇文章中，我们创建了一个mixin文件，现在修改下改文件（init-ad.js)

在data中添加一个状态值：flag:false;
添加如下方法：

// 统计广告点击量
        adsTouchStart(e){
            this.flag = false;
        },
        adsTouchMove(e){
            this.flag = true;
            // console.log('move')
        },
        adsTouchEnd(e){
            // 判断是滑动还是点击，只有点击才会被触发
            if(!this.flag){
                e.target.classList.add('hide');
                setTimeout(function(){
                    e.target.classList.remove('hide');
                },300);

                let cpName  = this.$route.query.cpName || 'WAPDETAIL';
                if(this.$route.path == '/home/rcmd'){
                    cpName = 'WAP'
                }
                let path = this.$route.path;
                // 参数
                let params = {
                    channel:cpName,
                    adsSource:path
                }
                this.adsClicks(params);
            }
           
        }

完美，统计很准确。

有什么问题可以加我的微信，有问必答。

致力于技术分享的厨师