This article is a step-by-step guide on how to build a web-to-app deep linking using Mogua’s solution.

The use case: Mogua Demo app

The Mogua demo app on our website is a simple use case of how to track the web referrals for app installs.

The process of the Mogua Demo is as the image below.

1.Collect web visitors’ device info.

When a visitor enters your website, it triggers the web SDK to collect the params and the device’s info.

This step can be tested on our live demo on the web:

• Enter a key-value pair on the demo. This step simulates how you (the developer) set tracking params for your webpages.
• If you visit this demo on PC, after you click “Go!” you’ll be able to scan the QR code to this demo on your mobile. The key-value pair will be passed to the mobile webpage. This step simulates how a visitor interacts on your website.
• The web SDK collects users' device information.

2.Taking the visitors to the app

When a visitor clicks on the download button on hosted webpage, the SDK will use the openOrDownload method, and the web download click event on the web SDK will be triggered and counted.

The SDK will identify whether your app is already installed on the visitors’ devices.

• If installed, the app will be opened directly. An app opening event will be triggered and counted.
• If not installed, the visitor will be taken to the download URL. When the user first opens the app after installation, an app installation event will be triggered and counted.

Statistics of these events can be viewed in the dashboard.

3.Matching app visitors’ device information

When your app is opened on a device, Mogua SDK will collect the device's information and match it with that on the app server.

If there’s a match, the parameters from the web will be retrieved. In this way, the users’ sources are identified.

4.Taking the visitor to the deep link automatically

If you have appointed a specific page in the app in your params, the SDK will open the page automatically after retrieving the params from the website.

Step to step guide

Here is a step-by-step guide on how to deep link to an app with Mogua’s solution:

1.Create a Mogua account.
2.Create an app on Dashboard.
3.Configuration your app:
-Set up authentication
-Set up app download links

You can set up the download link in configuration or set it up in your code.

For deferred deep linking to work, you need to set up your app’s download URL.

For deep linking to work, you need to establish the link association between your app and its respective URL scheme (for iOS) or App Links (for Android). This involves defining the custom URL scheme or configuring the App Links metadata in your app’s configuration files.

You can follow the guidelines to finish this configuration on Mogua’s app dashboard.

4.Integrate SDK into your app and hosted website

Follow the document to integrate the SDK into your app and website.

5.Passing params from web to app

The SDK will pass the params in URLs automatically for you.

For example, if your app download page URL is https://testapp.com/, and you need a custom installation parameter such as uid=12345678, the URL with the custom installation parameter would be: https://testapp.com/?uid=12345678. Multiple parameters are concatenated with & like: https://testapp.com/?uid=12345678&room=1.

The SDK will automatically fetch parameters from the current URL and upload them to the Mogua server for later use in your app. You can also manually define parameters.

You can define what params to pass from web to app in your code. You can see an example here.

<script src="https://www.mogua.io/script/moguasdk/index.umd.js" ></script>
<script>
    Mogua.init({
        appKey: '43ba757b8bc3',
        params: { key1: 'value1', key2: 'value2', ... }
    });
</script>

6.Retrieve parameters from website on your app

When users open your app, Mogua app SDK will start to retrieve params from the server.

This is an example of retrieving data with getInstallData  method.

Mogua.getInstallData(object: MoguaCallback {

    /**
     * Callback when data fetch is completed.
     * @param data Key-value pair parameters passed to the app from webpage. If no parameters are provided, an empty HashMap object is returned.
     */
    override fun onData(data: HashMap<String, Any>) {
        // Use data to retrieve the user's channel or referrer, etc.
    }

    /**
     * Callback when an exception occurs.
     * @param e The exception.
     */
    override fun onError(e: Exception) {
        // ...
    }
})

7.Test deep-linking as developer and user

Thoroughly test your deep links across different scenarios to ensure their accuracy and functionality. Test deep links from external sources, such as emails, websites, or social media, to ensure they correctly navigate users to the intended screens or actions within the app.

By following these steps, you can effectively implement web-to-app deep linking with Mogua’s solution, ensuring a seamless transition for users from your website to your mobile app. For more detailed information, please refer to Mogua’s documentation.