When a user clicks on a link, how do you take them
to the right screen in your app? Let's say you're building a music app and you want to provide links
to in-app content, like an album or a song. For example, you want to drive engagement by sending out an email
with a link to a new album. How do you configure your Flutter app to open the installed app
on mobile devices? Well, a link contains a string of characters called a URI. Each URI has a scheme,
authority, and path. A deep link is a link
that sends your users to a destination in your app rather than a web page. A web link is a type of deep link that uses either an HTTP or HTTPS scheme. An Android app link, is a subset of a web link, but provides a better user experience as we'll see in this video. For more details on how
deep linking works on Android, you can also check out
the Introduction to Deep Linking series on the Android Developers Channel. When you deploy your Flutter app
to multiple platforms, you don't need to rewrite
any navigation code. You can use the same code
to handle deep links to display in-app content on mobile platforms or the web. In this video, we'll see how to configure
your Flutter app to handle deep links using best practices, and see how to configure
your Flutter app to use in-app links so you can provide
a great user experience for your Android users. But before we dive into the code, joining me today is Ran Mor,
who's going to share why adding deep links to your app helps you and your users. Take it away, Ran. Thanks, John, and hi everyone. Today I will discuss
the importance and benefits of implementing deep links for your app, and share some of the tools we have that can help you with implementation, prioritization, and validation
of deep links. Let's start with, why should you
implement deep links? First, apps usually have a much smoother user experience than mobile websites. If you want to provide
the optimal experience for your users, it's better to lead them into your app. Second, deep links allow you to drive more traffic into your app. They can be used in multiple use cases such as marketing, emails, and SMS. More traffic to your app means more in-app purchases,
check-outs, and sales. Third, with deep links you can include targeted URL parameters to create a personalized app experience. Remember, users tend to delete apps that don't make it easy
to complete their central tasks. Whether it's interacting with other users, verifying some data, or adding the right items to their cart. With deep links, you can give
your application code all the logic it needs to help your users accomplish their goals in your app with minimal effort. Last but not least, deep links drive long-term engagement, and boost the ROI you get from your app. We've seen that users
who are directed to apps are twice as likely to perform actions as users who are directed
to the mobile web versions of the same content. So the ROI is much higher for both you and the users. There are different types of deep links, but for the best experience on Android we highly recommend implementing the native Android app links. They are more secure and specific because you prove
ownership of the domain. No other app can claim
they own the same domain and use your links. Plus, they provide a seamless
user experience. It's a single HTTP URL
for the same content on your website and in your app. Users who don't have the app installed go to your website instead of the app. This behavior doesn't exist
in custom URL schemes even though it's critical
for the user experience. Similarly, on iOS, universal links are the preferred way
to implement deep links. For more information on how to
implement universal links, check the links in the description below. I'll now pass it back to you, John,
to discuss how to implement deep links in Flutter. Thanks, Ran. To get started with deep linking
on Android and Flutter we'll follow these three steps. First, the Flutter app
needs to be configured to show one or more screens
for specific URL paths. Second, the Android app manifest needs to be modified to handle deep links. Third, a Digital Asset Links JSON file needs to be hosted by a web server
that you own, and using a domain that you own. Let's go back to our music app example. When your users search for a song, a URL path, such as <i>library/album/1</i> should take the user to the screen
for that album ID. You could use named routes, which are simple to configure, but will always push a new screen
when Flutter receives a deep link from the operating system. If the app hasn't launched yet, then Flutter will display
the initial route first and then push the matching route. This is quick and easy,
but as your app grows, you might need to configure
the exact screens to show when a deep link is received
from the platform. For this, Flutter provides the router, which helps make sure that they are
handled consistently, regardless of the current location
the app is showing. You can find packages on Pub
that help you configure deep links with a single configuration object. For example, the <i>go_router package</i> For more information on <i>go_router</i> go to <i>pub.dev</i> or try the sample in the DartPad samples drop down. For more details on how to
set up your app, visit the navigation
and routing page on <i>flutter.dev</i> The second step is to configure
the Android operating system to open the main activity when the user invokes
an intent we want to handle. For example, by clicking on a link
to our apps website in a web browser. Once the main activity starts, Flutter will pass along
the route information to your app. In the apps Android manifest file, we'll add some code to the main activity. The first thing we'll add
is the <i>meta-data</i> tag to configure the Flutter framework
to handle deep links. After that tag,
we'll use an <i></intent-filter></i> which we'll use to configure
our Android app to handle intents coming from the URL
to start the main activity. To request automatic app link verification set Android <i>autoVerify=" true"</i> Next, we'll add data tags to specify the URL scheme
and host components that should resolve to your activity. Then we'll specify the action view <i>
intent.action.</i> so that the intent filter
can be reached from Google Search, the browsable category which is required for the intent filter
to be accessible from a web browser, and the default category, which allows your app
to respond to implicit intents. Our Android manifest is now configured. To test your app links on an emulator or configure your iOS app, see the deep linking page
on <i>flutter.dev</i> The third step is to setup App Links. App Links are Android only. For iOS, you can follow the instructions
for universal links on the Apple Developer Documentation site. To use App Links, you also need to add verification that proves you're the owner
of the domain. To do that, a Digital Asset Links
JSON file must be published on your website
to indicate the Android apps that are associated
with that website. The JSON file uses the following fields to identify associated apps. The application ID or package name that's declared in the apps gradle file. The SHA256 Fingerprints of your app
signing certificate can be generated by running
the keytool command provided by the Android SDK. Post this new file called <i>assetlinks.json</i> with your web server. If you're using Flutter web, you can just put it in your
Flutter projects web directory and deploy your app. That's it, our app is ready to use
App Links. When your users tap on a link
to your website, the Android app will now open
when its installed. Otherwise, if you're using Flutter web, the Flutter web version
will be displayed, and your users will be taken
to the same destination within your web app. Now let's see what deep linking has done for some real-world apps using Flutter. Back to you, Ran. Thanks, John. Let me quickly talk about
some companies that started using deep links, and the tremendous effect
it has on their business. Shopee, the leading e-commerce platform
in Southeast Asia and Taiwan realized that their app traffic converted 20 times better than on the web, and decided to prioritize ways to make it easy for customers
to shop in-app. To deliver a frictionless experience across their mobile site and app, the marketing and product teams aligned on implementing deep links
and saw amazing results. Before implementing deep links, approximately 20% of shopping traffic
landed in the app. Today, Shopee has seen
50% of shopping traffic land directly in the app, which represents a staggering
126% increase in checkouts. Skyticket, which helps users find flights was looking for a solution
to fully leverage their app by connecting it to
their search and display ads. After implementing deep links, 21% of the total conversions
of Skyticket search campaigns come from in app pages. This has resulted in a 3.4 times
higher conversion rate from the app versus the web. Lastly, Magalu, a Brazilian retail company decided to prioritize
their mobile business due to growing popularity within high lifetime value customers. They implemented deep links and saw 109% increase in sales
through the app, 36% in higher conversion rate
for mobile devices, and 42% growth in all mobile purchases. The Play Console team just launched a new deep links page in Play Console that offers a quick yet
comprehensive overview of the deep link set up in your app, and gives step-by-step guidance
on how to fix issues. For more information, check the link to the new
deep linking page in the description below. Also, anyone who has access
to Google Ads can use our deep linking tools that help in validation and exploration of the missed links in your app. The Deep link validator allows users
to validate the entire app, see what deep links are working, and understand how to fix
the misconfigured ones. The Impact Calculator allows you to see what deep links are missing in your app and what value we can get from implementing those missing deep links. We highly recommend that you work
with your marketing team to get the reports that are generated
by those tools. For more information, check the links in the description below. To summarize, you should use deep links
for a better user experience and engagement with your app. The more deep links in your app,
the better the user experience. If possible, app links are preferable
to custom URL schemes. Back to you, John. Thanks, Ran. For more information, check out the deep linking page
on <i>flutter.dev</i> or the Android app links documentation. Thanks for watching.
