【笔记3】二维码扫码数据埋点

zhouzhou 发布于2019-07-01 10:28 / 3073人阅读

摘要：项目中遇到的问题前台为商品扫码数据埋点二维码中的链接是外链，不是自己的后台，如果直接放外链的话，是统计不到数据的，所以需要先请求到自己后台，然后重定向外链。

项目中遇到的问题：1.前台为商品扫码数据埋点（二维码中的链接是外链，不是自己的后台），如果直接放外链的话，是统计不到数据的，所以需要先请求到自己后台，然后重定向外链。2. 二维码中链接如果太长，二维码的点会很多，手机扫码识别时间加长，需要设计短链接替换策略

1. vue前端

引用qrcode-lite包生成二维码

import { toDataURL } from "qrcode-lite"
...
const longUrl = "http://h5.m.taobao.com/app/smg/index.html?a=1&b=2&c=3..."
this.shortUrl = this.getShortUrl(longUrl)  // 由长链接获取短链接
const qrOption = {
    width: 200,
    margin: 1,
    quality: 0.3
}
this.getQrcodeImgURL(this.shortUrl, qrOption).then(url => {
    this.qrcodeImg = url
}).catch((err) => {
    console.log(`Create qrcode img failed, ${err}`)
})

2. laravel后台

后台主要实现3个功能，生成短链接、长链接的缓存和取用、重定向

public function shortUrl(Request $request)
    {
        $url = $request->input("long_url");
        if (!$url) {
            return response()->json([
                "code" => "-1",
                "message" => "The long_url is required!"
            ]);
        }

        $key =  Carbon::now()->timestamp; // 以当前时间戳作为缓存的key
      
        $expiresAt = Carbon::now()->addDays(10); // 短链接的有效时间为10天
        Cache::put($key, $url, $expiresAt);

        return response()->json([
            "code" => "0",
            "message" => "Success short the url",
            "data" => $key
        ]);
    }
    
 public function redirect($shortCode)
    {
        $key = $shortCode;
        if (!$key) {
            return view("common.error", [
                "errorTitle" => "扫码错误",
                "errorMessage" => "二维码错误,请跟管理员确认!"]);
        }

        $redirectUrl = Cache::get($key, "expiration");
        if ($redirectUrl == "expiration") {
            return view("common.error", [
                "errorTitle" => "扫码错误",
                "errorMessage" => "二维码过期,请重新生成二维码后再扫码!"]);
        }

        // 记录埋点数据
        ...
        
        return redirect()->away($redirectUrl);
    }

云服务器 GPU云服务器埋点数据数据埋点无埋点数据 js 数据埋点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/29206.html

资源集 - 收藏集 - 掘金

摘要：行爬取顶点全网任意小说掘金之前连续多篇文章介绍客户端爬取平台，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。文件标记所有文件我的后端书架后端掘金我的后端书架月前本书架主要针对后端开发与架构。 30行js爬取顶点全网任意小说 - 掘金之前连续多篇文章介绍客户端爬取平台(dspider)，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。如果你还不知道客户端爬取，可以先看...

stdying 2019-07-25 12:06 评论0 收藏0
资源集 - 收藏集 - 掘金

摘要：行爬取顶点全网任意小说掘金之前连续多篇文章介绍客户端爬取平台，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。文件标记所有文件我的后端书架后端掘金我的后端书架月前本书架主要针对后端开发与架构。 30行js爬取顶点全网任意小说 - 掘金之前连续多篇文章介绍客户端爬取平台(dspider)，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。如果你还不知道客户端爬取，可以先看...

马忠志 2019-08-15 10:42 评论0 收藏0
说说微信扫码登录

摘要：详情接口我们这里主要讲的是网站应用，网站应用微信登录是基于协议标准构建的微信授权登录系统即上面的协议。在微信客户端授权登录获取用户信息的可以查看。微信授权登录目前支持模式，适用于拥有端的应用授权。一、OAuth2.0 OAuth（开放授权）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频，联系人列表），而无需将用户名和密码提供给第三方应用。 ...

Jokcy 2019-08-23 13:07 评论0 收藏0
来聊聊react-native应用的健康监控

监控什么今天我们来聊聊如何监控你的应用程序，这里的监控说的不是让我们去监控用户，而是监控应用的健康状态，什么是健康状态呢？对于后端的同学来说，在微服务的架构下，每个子服务是否正常工作、返回的结果是否满足预期，这些就算是健康状态，再举个例子，你的台式机，对于操作系统来说，每个硬件是否能正常的工作、工作的稳定性，这些都是需要关注的健康状态。既然我们关心健康状态，那么我们该如何衡量一个设备的健康状态...

tunny 2019-08-22 16:03 评论0 收藏0