Ionic（Angular）Capacitor应用中如何从安装URL提取推荐码？

一、核心思路 #

由于Android和iOS平台的安装来源追踪机制不同，需要分平台处理，使用维护中的社区插件或Capacitor官方API实现，避免依赖过时工具。

二、Android平台实现 #

使用社区维护的@capacitor-community/install-referrer插件，对接Google Play的Install Referrer API，直接获取安装来源参数。

1. 安装插件

npm install @capacitor-community/install-referrer
npx cap sync

2. 提取推荐码并上报

import { InstallReferrer } from '@capacitor-community/install-referrer';
import { Analytics } from '@angular/fire/analytics';

async function handleAndroidReferrer(analytics: Analytics) {
  try {
    const { referrer } = await InstallReferrer.getReferrer();
    const params = new URLSearchParams(referrer);
    const refCode = params.get('refUrl');
    
    if (refCode) {
      await analytics.logEvent('install_with_referrer', { ref_code: refCode });
    }
  } catch (err) {
    console.error('Android获取推荐码失败:', err);
  }
}

3. 权限说明
   插件会自动在AndroidManifest.xml中添加所需权限：

<uses-permission android:name="com.google.android.finsky.permission.BIND_GET_INSTALL_REFERRER_SERVICE" />

三、iOS平台实现 #

通过Capacitor官方@capacitor/app插件结合Universal Links配置，获取应用启动时的来源URL参数。

1. 配置Universal Links

• 在Apple Developer后台添加应用关联域名（格式：applinks:market.com）
• 在capacitor.config.ts中配置关联域名：

export default defineConfig({
  ios: {
    associatedDomains: ['applinks:market.com']
  }
});

2. 提取推荐码并上报

import { App } from '@capacitor/app';
import { Analytics } from '@angular/fire/analytics';

async function handleIOSReferrer(analytics: Analytics) {
  try {
    const { url } = await App.getLaunchUrl();
    if (url) {
      const params = new URLSearchParams(new URL(url).search);
      const refCode = params.get('refUrl');
      
      if (refCode) {
        await analytics.logEvent('install_with_referrer', { ref_code: refCode });
      }
    }
  } catch (err) {
    console.error('iOS获取推荐码失败:', err);
  }
}

四、跨平台统一调用 #

在应用初始化时（如app.component.ts的ngOnInit），根据平台自动执行对应逻辑：

import { Component, OnInit } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { Analytics } from '@angular/fire/analytics';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(private analytics: Analytics) {}

  async ngOnInit() {
    if (Capacitor.getPlatform() === 'android') {
      await handleAndroidReferrer(this.analytics);
    } else if (Capacitor.getPlatform() === 'ios') {
      await handleIOSReferrer(this.analytics);
    }
  }
}

五、测试建议 #

• Android：使用adb命令模拟安装来源

adb shell am broadcast -a com.android.vending.INSTALL_REFERRER -n 你的包名/com.google.android.finsky.referrer.InstallReferrerReceiver --es "referrer" "refUrl=test_code"

• iOS：点击配置好的Universal Links测试，或在Xcode中添加启动URL参数模拟

内容的提问来源于stack exchange，提问作者Max