🍧Changing Ad Visuals
Last updated
Last updated
Customizing the look of the ads is as simple as switching out image assets on specific game objects in the hierarchy and changing the text and image colors. Additionally, you may also reposition and resize some of the UI elements.
For this example, we consider the MediaLandscapeSimple display handler template. The steps discussed will apply to all other display templates as well.
CHANGING IMAGE ASSETS
The starting point of changing the look of the ad is by changing the ad background. This can be done by changing the source image of the Image component on the Display Template root object.
Let's consider a Game with a Starry Night visual theme
After changing the Ad background, we can change the source images on certain child objects to further customize the look of the ad.
| OBJ NAME | CHANGE ? | COMMENTS |
|---|---|---|
BigImg | No | This gets assigned at runtime by the Advertiser Large image asset |
AdIconImg | No | This gets assigned at runtime by the Advertiser Icon image asset |
ButtonCta | Yes | You can use the button UI asset from the game here |
AdTag | Yes | You can also switch out the default ad tag with your custom AdTag asset |
There could be other image objects in the ad display hierarchy, which serve only an aesthetic purpose and can be customized. An example of such an object would be the lower rectangle panel in the above image which groups the logo, headline, rating, and CTA button.
CHANGING COLORS
In addition to colors on the image component, the text colors can be changed as per the colors in your game
| OBJ NAME | CHANGE? | COMMENTS |
|---|---|---|
AdHeadlineTxt | Yes | Found in all Display Templates as it is a required field |
AdCtaTxt | Yes | Found in all Display Templates as it is a required field |
BodyTxt | Yes | Is an optional field. Not present in all Display Templates. |
StarTypeTxt | Yes | Is an optional field |
BigImg | No | Will be set to white at runtime to preserve the look of the Large image provided by the Advertiser |
AdIconImg | No | Will be set to white at runtime to preserve the look of the Small Icon image provided by the Advertiser |
And that's all there is to customize the look of an Ad Display Template.
You can go ahead and customize other Display Templates as well - MediaLandscapeBlur, MediaPotrait, and NonMedia. The same steps apply with minor variations.
Here's an example of the ad in a game with wooden visual theme:
In addition to this, you can adjust the position of individual elements by changing values in the RectTransform and the built-in Unity UI Layout components.
CHANGING AD SIZE:
The Ad size can be changed by adjusting the Rect Transform scale.
The important pointer to keep in mind is to make sure the scaling is uniform (Same values for X and Y)
CHANGING AD SHAPE:
You can change the Ad Shape by changing the width and height value of the Rect Transform on the Root Object (SS_NativeAd or WS_NativeAd)
This will impact both MediaType as well NonMediaType display templates
If you want to change only one of these categories, then instead of the Root object you can adjust the Left, Right, Top, and Bottom padding values on the MediaType or NonMediaType objects.
In this case, you could disable the Image component on the root game object (SS_NativeAd or WS_NativeAd) to remove the light gray background.
Once new values are set, you may need to adjust the properties on certain child elements depending on the structure of the Display template. Make sure to test adjusted values across different display resolutions
