Monetizing apps with Flutter

[Music] hello everyone my name is zoe i am a product manager on the flutter team and i'm andrew from flutter's developer relations team thank you for joining our breakout session we're here today to show you how you can monetize your flutter apps if you watched the keynote earlier you probably already knew that we announced open beta for the google mobile ads sdk for flutter and that's what we're going to focus on today but i just want to quickly mention that in addition to ads there are two other ways to monetize your mobile apps for example you can always charge for your app in the app store another option will be in app purchase you can allow your user to buy extra content or features such as game currency through in-app purchase we also have a plug-in for that on pub.dev today we're going to be focusing on ads because we have this new ads integration that we're excited to tell you about during the keynote today we announced the google mobile ads sdk for flutter is now open for beta in this brand new plugin we now support a wide variety of ad formats for example an overlay banner which is usually a rectangle add at the top and bottom of the device screen second an inline banner actually it's just another variation of the better ads but the main difference here is that the overlay banner is floating on top of a flutter view but the inline banner allows you to integrate it into the widget tree so the ads can appear in line with ad content next is interstitial these are full screen ads that cover the whole screen of your app these ads work great when you place them at natural breaks and transitions in your app for example you can place them after the user completes a level in the game we also support rewarded video these are ads that reward users for watching short videos last but not least we're also supporting native ads native ads are highly customizable so you can design them to match the look and feel of your app content this allows you to provide a seamless ad experience with minimal interruptions to the app moreover another highlight of this new plugin is that we're now unifying support for both ad manager and admob for those of you who are not familiar admob and ad manager are two different ad services generally speaking small to medium size publishers prefer admob because it's an easy to use solution google ad manager is an ad management platform for large publishers who have significant direct sales and need more advanced features that being said no matter what size publisher you are our new plugin is able to tailor to your scenarios when it comes to mobile code admob and app manager are very similar in terms of implementation so for today's demo we will use an admob ad as an example before we get started here's some ads terminology i would like to clarify first add unit add unit represents a single place in your app where you want to show an ad if you have an app with three screens and you want to show a banner on each screen then you need to create three ad units so you can control them independently next add format we already talked about it earlier you can choose between a banner ad an interstitial rewarded video or native ad add request when your app loads an ad it sends an ad request to the server you can use this object to provide additional information that can be used when selected last but not least test ad once you implement an ad you definitely want to test it but it's important to enable test ads during development so you can click on them as much as you want without the clicks actually being recorded because if you click on too many ads without being in a test mode there's a risk that your account might be flagged for invalid activity and you don't want that to happen the good thing is that google does provide test ad units these ad units are not associated with your account at all so there's no risk of your account generating invalid traffic when using them okay now you have enough of ads terminology we can get started for today's demo andrew and i are going to show you an app we created in our spare time let me tell you more about it both andrew and i are parents so we created this app called the big list of parenting jokes it was so much fun that we wanted to share it with the entire world but we soon realized that we have to pay for the maintenance cost the servers etc so we like to monetize the app via ads that way the app can be free to download in order to load an ad in your app the first step is to create an ad unit actually in order to do so you will first need to create an admob account you can follow the link below to create an account to save some time i have already created an admob account after you log in you will navigate to the left and click apps in the sidebar here we want to create a brand new app so you will now click add app let's first create an android version of our app select android as the platform select no because we haven't published it yet let's fill in a name the big list of parenting jokes select add app okay now you see there are two tasks for you to complete the first one is to set up an apps.txt for the app that's a mechanism that lets you leverage your business website for some extra security it's a good thing to use but since we're focused on mobile app right now i'm going to skip past it now let's move on to create an ad unit for the ad format i'm going to pick banner because banner is probably the easiest one to start with later andrew can show you how to display an overlay banner versus an online banner in the code now let's enter a name for this ad unit let's call it a demo ad well you know what the name is kinda boring i'm just gonna call it a fun ad here we go click create ad unit hooray now you have your first ad unit but don't forget you only create an android version at this point let's repeat the same step to create an ios one let's hit done go to apps in the sidebar add app select ios this time click no hit continue put the app name there click add app create an ad unit select a banner again give it a name click create ad unit cool now we have two ad units one for each platform now android is going to show us how we can load them in our flutter app over to you andrew thanks zoe alright so here i am with my running app it displays a list of jokes that i like to tell my daughter as you can see my design skills aren't that sophisticated but my comedy is pure gold right so that's why philip did the talk and design touches and i'm doing this one let's take a quick look at the code i have a hard-coded list of joke data here in a file called data.dart in main.dart i have a stateless widget that represents my app and another widget for the screen itself which uses a scaffold and list view to display a row for each joke in the list so i've got my app zoe and i made the decision that these jokes need to be brought to the whole world so i'm going to use ad based modernization from admob to make that possible the first step is to get the ads sdk integrated into my project i can do that by adding a line to my pub spec for the google mobile ads plugin this plugin has support for ios and android while i'm in here i'm also going to throw in a line for provider which is a package you may already know it makes distributing data down the tree with inherited widgets a little cleaner and easier now i just need to do a pub get and a full rebuild of my app and i'll have those packages and the native code that comes with the plugin now once that native code is initialized some of it's going to look around for an admob application id i just registered two of those yup and i need to add them to my underlying android and ios projects first let me open the manifest for my android project i just need to add a little xml element within the application tag to hold that id as metadata you'll see there's a particular name for the metadata and don't worry about memorizing that because it's included in the plugin instructions okay so that's android now for ios i need to update the info.plist file that's part of my app's ios runner subproject the flutter plugin for intellij has this handy shortcut for opening xcode which i will now use then i add a new row to the plist file called gad application identifier and again don't memorize that because it's in the instructions and then i give it a string value and i paste in my ios application id cool so now no matter which platform i'm building for android or ios the sdk will know right where to find the correct id speaking of sdks now's a good moment to point out that the google mobile ads plugin references the same native mobile ads sdks that you use for any other ios or android app so the two places you just saw me adding id values are the same as you would use for any other ios or android app whether it's built with flutter or not okay so now i need to update my app's dart code to take advantage of these new capabilities let's start right up here in main before i do anything ads related i need to initialize the mobile ads sdk for simplicity's sake i'd like to do that right when my app starts running because that initialization involves dart talking to native code i need to make sure flutter's method channel service is running and the way to do that is by calling widgetsflutterbinding.insureinitialized you may be looking at that line and thinking i've used plugins before and never in my life if i had to do anything with whatever the heck that method is and you'd be right run app will actually call this for you when it executes but because i want to use a plugin before calling run app i need to do it myself to avoid a runtime error okay so here's the initialization call which returns a future it's important to wait for that future to complete before doing anything that involves ads sitting and waiting before calling run app isn't a great idea though so instead i'll create a little class to hold data about my ads integration and use provider to make it available to the widgets further down the tree so i'll make a new file called add state.dart and inside i'll create a little model class first thing it'll need is a property for the future and i can take that in via the constructor also i can stick my ad unit ids in this class i registered two of those as well right as we saw earlier zoe created one banner ad unit for android and one for ios since i'm working on my app right now though and you should always always always use test ads when you're working on your app i'm going to use the dedicated test ad units for banners on ios and android there's actually a page in the admob documentation that lists these ad units for each platform and format and they always serve test ads which makes them great when you're coding so i'll add a little platform check here and return the right ad unit for each one now back in my main method i can create one of these little objects and give it the future from the mobile ads plugin then wrap my application widget with a provider and use the value constructor to make my add state object available to any widget that needs it all right now if i do a rebuild of my application you will see that i have changed absolutely nothing that's visually discernible but that's okay it's up and running with the sdk and now i can load and display an ad there are lots of ways to make room in an app's ui to display a banner however i am but a humble dad joke author so i'm going to start with one of the simplest just a single banner at the bottom of the screen first i'll wrap my list view in a column then i can add a sized box at the bottom i'll give it a height of 50. there are a bunch of standard sizes for banner ads but 320 by 50 is definitely the most common now i just need to add an expanded widget around the list view to make sure it fills all the remaining space in the column and now i can hot reload again and you see there's now a little space below my list view for a banner and the list view still scrolls nicely within its viewport all right let's load an ad in order to track the state of an ad as it loads i need a stateful widget so i'll convert jokeless screen to be stateful and the plugin helps me here and now i can add a field for a banner ad this object represents a single banner ad placement within the application the remaining work for me is about loading an ad into this placement and using the aptly named ad widget to integrate it into the widget tree so my users can see it okay first up is loading an ad i need to make sure initialization is complete before i do that so i'll override did change dependencies in the state object this method is called anytime one of the inherited widgets on which a state object depends gets changed it's also run just after in its state the first time a state object is created but before build so it's a good spot for any non-trivial work you need to do that requires a build context first i need to call the superclass method next i'll grab the add state using provider then i can use then to add a function to be executed when that future completes inside i'll call setstate and instantiate a banner add object it needs an ad unit id which i can also get from add state and a size i'll use addsize.banner which is 320x15 next up is an ad request and i'll just need a plain one but this object allows you to set flags and parameters that are used when the server selects an ad if i were using google ad manager here rather than admob i might want to set keywords to help the server select from several different ad campaigns that i'd set up beforehand the last parameter i need is an add listener object this is a class that exposes a bunch of callbacks that the ads plugin will call in response to events i could define one here but a better place would be back in ad state i can create a getter for a listener right here and for the actual instance you know how we've all seen those cooking shows on youtube where someone starts a recipe for like a giant roaster this is okay this is going to take about three hours to cook but i just so happen to have one here that i started three hours ago well consider the following pasted in code to be my giant rose turkey because it's large and easy to understand actually it's only 15 lines so maybe a roast chicken but it is good code this is a simple ad listener that just logs all the events that can take place there's one for an ad loading for instance and one that's called when someone taps on an ad and leaves the app for a browser you could use that one to stop background work if you happen to be running some anyway i provide that listener from my add state object right here and that's it now i just need to call load which i'll do using the cascade operator this is a neat little dart trick it calls the method but instead of returning the result it returns the object on which the method was called cool so now i've got this closure here that will execute once ads are initialized and it's going to create a banner ad and call set state all that's left now is to display that ad so let me go back to my build method and change the bit at the bottom to use an if then ever since dart 2.5 we've been able to use if else statements and for loops inside lists so i can put a null check on banner ad here and return the size box if the ad hasn't been created or put in a container with the same height if it is then inside the container i'm going to use an add widget to display my banner ad okay let me go ahead and hot restart and there's my test ad i can tap on it and open a browser with the destination url come back and you can see in my log that the listener is receiving and printing out ad events properly awesome so i guess we're done now thanks everyone i hope you've enjoyed this talk wait uh we haven't gone to the cool part yet okay just kidding please go ahead and be cool thanks and i i wish people would say that to me more as some of you may know there's been an admob plugin for flutter for a while i actually worked on it a bit when i was on the ads team that's how i got hooked on flutter in the first place what's new about this version is that the ads are integrated into the widget tree previously they were displayed with native views that floated on top of whatever flutter rendered they were two completely different systems so you couldn't put a banner in a column like i just did and you definitely couldn't put them in a scrolling list of widgets now though you can and i'm going to show you how and turn my dad joke business up a notch first up i'll need more than one banner so what i'm going to do is remove the banner ad property and instead keep track of a list of items one for each row in the list and they'll be either a joke or a banner then in its state i'll start with a copy of the list of jokes so now i've got a new list and inside did change dependencies instead of creating one banner ad i'll loop through the list back to front and drop in banner ads every so often let's say to start a few from the end make sure i stop at one so there's no chance to have an ad first in the list and i'll put in one banner every 10 items now i just use insert at that index and i keep the same banner at constructor and load method from before so instead of loading one banner ad i'm loading a few at once and keeping track of where they should be displayed in the list cool so now in my build method i can remove the column and expand it and the fl's and go back to something much simpler first i need to change item count to use that new list and then i change the item builder to check the type of the item and return a joke row if it's a joke or a container and add widget if it's a banner ad okay i made a bunch of changes to the state object so let's do a hot restart instead of a hot reload and there we go i've got an ad on the screen and it scrolls right along with the rest of my list there's some other ads below and you can see they disappear under the app bar just like any other widget but i can still tap on a banner ad and just like before go to the browser come back no problem this to me is the best feature in this new version of the plugin being able to monetize with ads in a way that feels more natural and less obtrusive goes a long way to maintaining a good user experience also let me pull up an android emulator and build my app again this is a flutter event which means i'm talking to a multi-platform audience and i know you're curious and so here you can see the same app running on android with no code changes required i'm monetized on both platforms thank you andrew in this breakout session we have shown you how you can implement banner ads in your app but there are a lot more features we didn't get a chance to cover in this short session and we strongly encourage you to take a look the google mobile ads sdk for flutter is available on pub.dev for you to download and try today please follow the link below for detailed documentation by the way we also designed a collab please give it a try we hope this new plugin will help you unlock more revenue growth for your flutter apps thank you for joining us today bye bye now thanks everybody you

Channel: Flutter

Views: 65,474

Rating: 4.9519229 out of 5

Keywords: app monetization, how to monetize your app, make money with an app, how to make money with my app, Flutter, Flutter Engage, #FlutterEngage, Flutter events, Flutter conference, Flutter developers, Flutter online event, Flutter developers news, Flutter news, Flutter updates, mobile app developers, web app developers, web developers, app development, flutter designers, Flutter live, Google Flutter, Dart, type: Conference Talk (Full production);, pr_pr: Flutter, purpose: Educate

Id: m0d_pbgeeG8

Length: 22min 20sec (1340 seconds)

Published: Wed Mar 03 2021