In this codelab, you'll learn how to create beautiful native ads for your Android app with Doubleclick for Publishers and the Google Mobile Ads SDK.
To create a DFP Small Business network, you need a Google Adsense account. If you don't already have one, you can sign up for one here:
If you already have a Google Adsense account, signing up for DFP Small Business is a piece of cake.
That's it! Now let's start creating your first native ad.
Custom (user-defined) native ad formats allow you to define your own variables for native ads that will be direct sold.
A native ad format is a set of variables and styles that comprises a native ad:
To create your first template, you need to go to the Delivery tab, and then in the left column select Creatives -> Native Styles. Then, click the New native style button:
Since you are creating a new format from scratch, in the following pop-up window, select Create new format:
In the next screen, we'll call this template Native Codelab and we'll add the following variables:
There's no need to add a click-through URL, it's in the template by default. Once we save it, the native format should look like this:
Take note of the ID highlighted above (the ID of your newly created template might differ from this), you'll need it later in Step 9.
There's no more work to be done in the template for now, so proceed to the next section.
Imagine printing a hard copy of your home page and cutting out all of the ads. Each empty space is an opportunity to advertise. DFP defines each space, or similar spaces appearing throughout your website, as an ad unit.
In this section, you will create an ad unit called codelab. This ad unit represents the physical space in the screen that will show your native ads, so you can target campaigns to it.
To create your ad unit, navigate to the Inventory tab. In the Ad Units section, click the New ad unit button.
Then, fill in the required fields for the ad unit as follows:
Click Save. Everything else can be left with its default value:
And that's it! Your ad unit is ready. From now on, no more work is needed in the Inventory section, unless new ad units need to be created.
Once you've set up your inventory (as described in the previous section), you can start selling it by creating an order. In DFP, an order is an agreement between you and an advertiser that includes an invoice number (optional), start and end dates, and contact information.
Each order includes one or more line items. A line item specifies the advertiser's commitment to purchase a specific number of impressions (cost per thousand impressions, or CPM), clicks (cost per click, or CPC), or time (cost per day, or CPD) on certain dates at a certain price. Each line item also includes where an advertiser's ads will appear and, optionally, which times of the week and to whom.
In turn, each line item contains one or more creatives, which contain the actual ad content that is delivered to your users. DFP can serve a wide variety of creative types, including rich media, video, and mobile creatives.
To create your first order, go to the Delivery tab and click the New order button:
In the Order section, fill in the order details. For this example, use "Custom Rendering Codelab" as the order name, and "Google" as the advertiser. If the advertiser doesn't exist, create it by clicking "Add a new company" in the Advertiser dropdown as shown below:
Next, we'll create a Line Item for the order.
In the Delivery settings, select a Sponsorship type of Line Item. This will ensure that our ad is served every time it is requested, which is ideal for testing.
Lastly, tell DFP to only serve this ad when a request is being made to the codelab ad unit by selecting the ad unit in the targeting section. Leave everything else with their default values for now:
Finally, click the "Save and... Upload creatives" button. Now you're ready to upload the test creative to DFP in the following section. You're almost there!
Here is where you will upload the creative asset that will be served by this campaign. DFP can deliver more than one creative. The first step is to locate our Native Codelab template, and click Continue:
Finally, define and upload the assets to be served by our native ad.
Click Save.
Almost there! The last step is to approve the order:
If your Line Item is in status Ready then congratulations! Your first DFP campaign is ready to serve.
The next step is to integrate the Google Mobile Ads SDK into a brand new app and use it to display our previously defined Custom Native Template ad.
In order to complete the Get Started guide, you need to have Android Studio installed on your development machine. If you don't already have it installed, see the Android Studio site for instructions on how to download everything you need to get up and running.
In this step, you will create a brand new project in Android Studio to use for our example. If you don't already have Studio running, go ahead and open it now.
If you see the above welcome screen, select New Project. Otherwise, select File > New Project from the menu. This brings up the new project wizard:
Enter "CustomRenderingCodelab" as the app name, and whatever company domain you use for your apps. Android Studio automatically determines a good project location, but feel free to change it if you like.
On the next screen, select Phone and Tablet for the form factor and a minimum platform SDK version of 9. That's the minimum version supported by the Google Mobile Ads SDK.
We're keeping it simple for this example, so on this screen select Empty Activity.
On this screen you have the option of choosing names for the app's activity and its related resources. Use the default names for this example, and click the Finish button.
After clicking Finish, you have a working project with a single activity. Try compiling and running it (select Run 'app' from the Run menu). You should see a "Hello world!" message on an otherwise empty gray screen. Don't worry, you'll add some more content in the next steps.
To use the Mobile Ads SDK in your project, you first need to reference it as a dependency in your app's build.gradle file. Open CustomRenderingCodelab/app/build.gradle
and look for the dependencies section near the bottom.
...
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.google.android.gms:play-services-ads:8.4.0'
}
...
Add a line to it like the last one above. This instructs gradle to include code from the play-services-ads artifact, which is found in the Google Repository.
You may see a warning message across the top of the Android Studio window indicating that gradle needs to perform a sync. If that's the case, click Sync Now to do so. Gradle will refresh your project's libraries to include the dependency you just added.
If this is your first time using the Google Repository, you may also see a message asking you to install it. If this happens, just agree to the install and Android Studio will take care of the download for you.
Once your build.gradle file is modified and everything has synced, try rebuilding your project (Run 'app' in the Run menu) to make sure it compiles correctly. You won't see any changes, but including Google Play services is the first step toward getting ads into your app.
An Ad Unit ID is a unique identifier given to the places in your app where ads are displayed. For example, if you have an app with two activities with banner ads, each activity will need an ad unit and unique ID.
In order for your new app to display an ad, it needs to include an Ad Unit ID. Open your app's string resource file, which is found at CustomRenderingCodelab/app/src/main/res/values/strings.xml
.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">CustomRenderingCodelab</string>
<string name="native_ad_unit_id">/{YOUR_NETWORK_CODE}/codelab</string>
<string name="native_template_id">{YOUR_TEMPLATE_ID}</string>
</resources>
The codelab ad unit name is the one we previously created in this codelab.
You need to modify your main activity's layout to include and define your native ad. Open CustomRenderingCodelab/app/src/main/res/layout/activity_main.xml
in the editor, and specify where we'll include our native ad layout (we'll use this RelativeLayout to inflate the ad inside it).
...
<RelativeLayout
android:id="@+id/adView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"></RelativeLayout>
...
Your native ad layout can be defined in the file above, but it's good practice to keep it separate. Thus, you''ll create CustomRenderingCodelab/app/src/main/res/layout/custom_template_ad.xml
and define the layout there. This is where you'll define the look and feel of the ad, including size, font, colors, etc.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/native_ad"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#dfdfdf"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:minWidth="200dp"
android:minHeight="200dp"
android:background="#ffffff"
android:id="@+id/mainImage"
android:layout_gravity="left|top"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_marginTop="5dp"
android:text="Headline"
android:id="@+id/headline"
android:layout_gravity="left|center_vertical"
android:layout_below="@+id/mainImage"
android:layout_alignLeft="@+id/mainImage"
android:layout_alignStart="@+id/mainImage" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Caption"
android:id="@+id/caption"
android:layout_gravity="left|bottom"
android:layout_below="@+id/headline"
android:layout_alignLeft="@+id/headline"
android:layout_alignStart="@+id/headline" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Sponsored"
android:id="@+id/textView"
android:textColor="#000000"
android:layout_alignTop="@+id/mainImage"
android:layout_alignRight="@+id/mainImage"
android:layout_alignEnd="@+id/mainImage" />
</RelativeLayout>
The final step: loading your ad. First, you need to create the adLoader object, for example in the onCreate() method inside the MainActivity:
...
AdLoader adLoader = new AdLoader.Builder(getApplicationContext(),
getString(R.string.native_ad_unit_id))
.forCustomTemplateAd(getString(R.string.native_template_id),
new NativeCustomTemplateAd.OnCustomTemplateAdLoadedListener() {
@Override
public void onCustomTemplateAdLoaded(NativeCustomTemplateAd ad) {
// Display ad and record impression
ViewGroup adView = (ViewGroup) findViewById(R.id.adView);
displayCustomTemplateAd(adView, ad);
}
},
null)
.build();
adLoader.loadAd(new PublisherAdRequest.Builder().build());
...
The example below will inflate the ad layout, and fill it with the ad response assets.
private void displayCustomTemplateAd (ViewGroup parent, NativeCustomTemplateAd ad) {
// Inflate a layout and add it to the parent ViewGroup.
LayoutInflater inflater = (LayoutInflater) parent.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View adView = inflater.inflate(R.layout.custom_template_ad, parent);
// Show the custom template
TextView headline = (TextView) findViewById(R.id.headline);
TextView caption = (TextView) findViewById(R.id.caption);
ImageView mainImage = (ImageView) findViewById(R.id.mainImage);
headline.setText(ad.getText("Headline"));
caption.setText(ad.getText("Caption"));
mainImage.setImageDrawable(ad.getImage("MainImage").getDrawable());
// Record an impression
ad.recordImpression();
// Handle clicks on image
mainImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ad.performClick("MainImage");
}
});
}
And that's it! Your first native ad is ready:
Now it's time for you to start creating your own custom ads!
Did you have issues with the codelab? Don't worry, you can always download and try the sample app by yourself.
Clone the GitHub repository from the command line:
$ git clone https://github.com/googlecodelabs/drx-custom-rendering-android.git
Or download a zip file:
Once the code is downloaded, the following instructions describe how to open the completed sample app:
Want to learn more about DFP? The Publisher University and DFP Help Center are great resources.