哈希坊引流广告交互设计处理

 全文字数 2714 阅读约 12 分钟

背景

因为需要再答赚内部引流懂点医,实际是通过Feed广告和Task来引流,不管形式如何不同,但用户触发点击之后的行为应该是一致的,所以此文章主要对用户发生点击行为时,我们该如何处理,对用户做出怎么样的反馈进行解释。

开始

因为我们没有设计web端引流方案,所以用户点击广告时,触发的都是App引流,此处以懂点医App举例;

流程

1600003002000image.png

初期代码实现

//检查
 const appInfo = {
        appId: 'com.dongdianyi',
        name: 'dongdianyi',
        downLoadUrl: 'http://dongdianyi-1251052432.cos.ap-shanghai.myqcloud.com/dongdianyi-release.apk',
        iosId: '1434767781',
        androidScheme:"dongdianyi://",
        iosScheme:"dongdianyi",
        appStores:['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu']
    };

 //检查该App是否已安装(仅安卓)
    const checkAppStatus = () => {
        if (isIOS) {
            //IOS机制问题跳过检查
            downLoadApp();
        } else {
            AppUtil.isInstalled(appInfo.appId, (data: any) => {
                if (data) {
                    //唤起App
                    AppUtil.openApp(appInfo.appId);
                } else {
                    //下载apk
                    downLoadApp();
                }
            });
        }
    };


 const downLoadApp = () => {
        //检查当前手机的应用商店是否已上架该App,appStors由后台设置
        if (checkAppStore()) {
            //使用DeepLink跳转到应用商店下载
            const iosLink = `itms-apps://itunes.apple.com/app/id${appInfo.iosId}`; //ios应用商店schema地址
            const androidLink = `market://details?id='${appInfo.appId}`; //android应用商店schema地址
            const link = isIOS ? iosLink : androidLink;

            Linking.openURL(link);
        } else {
            //使用原生下载器下载(仅安卓)
            handleDownload({
                name: appInfo.name,
                url: appInfo.downLoadUrl,
            });
        }
    };

const checkAppStore = () => {
        if (appStores.includes(brand)) {
            return true;
        } else {
            return false;
        }
    };

//下载(downLoadManager)
import RNFetchBlob from 'rn-fetch-blob';
import { View, Text, PermissionsAndroid, Platform, StyleSheet } from 'react-native';

const checkPermission = async () => {
    try {
        const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            console.log('You can use the camera');
            return true;
        } else {
            Toast.show({
                content: `${Config.AppName}需要读取、写入或者删除存储空间和权限,已保证你能正常使用下载安装App`,
                duration: 2000,
            });
        }
    } catch (err) {
        console.warn(err);
    }
};

interface Props {
    name: string;
    url: string;
}

//下载前的检查
export const handleDownload = (props: Props) => {
    const { name, url } = props;

    //检查权限
    if (!checkPermission()) return;

    const android = RNFetchBlob.android;
    const fs = RNFetchBlob.fs;

    const apkPath = fs.dirs.DownloadDir + '/' + `${name}` + '.apk';
  
    //检查是否已安装
    fs.exists(apkPath)
        .then((exist) => {
            if (exist) {
                android.actionViewIntent(apkPath, 'application/vnd.android.package-archive');
            } else {
                startDownload();
            }
        })
        .catch(() => {
            startDownload();
        });


    //使用原生下载器下载(后台运行)
    const startDownload = () => {
        RNFetchBlob.config({
            fileCache: true,
            addAndroidDownloads: {
                useDownloadManager: true,
                notification: true,
                mime: 'application/vnd.android.package-archive',
                description: `下载${name}`,
                path: fs.dirs.DownloadDir + '/' + `${name}` + '.apk',
            },
        })
            .fetch('GET', url)
            .then((resp) => {
                console.log('resp', resp);
                android.actionViewIntent(resp.path(), 'application/vnd.android.package-archive');
            })
            .catch((error) => {
                console.log('error', error);
            });
    };
};


待优化的地方

  • 统一回调监听事件,埋点上报数据
 useEffect(() => {
        const actionAddListener = DeviceEventEmitter.addListener('action', (envent) => {
            switch (envent) {
                case 'onClick':
                    console.log('已点击'); 
                    //track
                    break;
                case 'onOpenApp':
                    console.log('打开App');
                case 'onDownloadActive':
                    console.log('开始下载');          
                case 'onInstall':
                    console.log('安装App');
                default:
                    break;
            }
        });
        return actionAddListener.remove();
    }, []);
  • 优化android原生下载器,fetchBlob没有暴露下载进度,暂时,完成等事件,此处优化后也能更方便运营分析引流效果
阅读 51发布于 2020-09-13 21:14:43
哈希表内部博客,转载请联系说明!