Tag Archives: Apps

Monetizing your app: Set your COPPA settings for your app

The Children’s Online Privacy Protection Act (COPPA) prohibits operators of commercial websites and online services (including mobile apps) from targeting children below the age of 13 using targeted ads. The Dev Center provides an option for an app developer to specify whether an app or ad unit is targeted to children.

We reminded our developer community back in 2015 to set their application COPPA settings, but several developers have not set their COPPA settings correctly. Doing so greatly affects the revenue that a developer can earn on apps that are not targeted to children under the age of 13.

If a developer selects the COPPA compliance option that his app is directed at children under 13, Microsoft will disable its behavioral advertising services when delivering advertising to the app. If a developer’s app is directed at children under the age of 13, he or she must select this option in “Monetize with ads” under the Monetization section in Dev Center for that specific application.

However, if your app does not target children under 13, then targeted ads are a great way to monetize, so make sure you select the right COPPA setting depending on your app’s content and target audience.

Note that developers may have other legal obligations under COPPA. You should review the FTC’s guidance and consult with your legal counsel regarding COPPA obligations.

Stay tuned for additional tips to increase ad monetization!

Read More

How to distribute your existing Desktop Applications via Windows Store to Windows 10 PCs – including the new Windows 10 S configuration

Overview

Windows 10 S is a specific configuration of Windows 10 Pro that offers a familiar, productive Windows experience that’s streamlined for security and performance. By exclusively using apps in the Windows Store and ensuring that you browse safely with Microsoft Edge, Windows 10 S keeps you running fast and secure day in and day out. Windows 10 S was inspired by students and teachers and it’s the best Windows ever for schools. It’s also a great choice for any Windows customer looking for consistent performance and advanced security. By limiting apps to those in the Windows Store, Windows 10 S is ideal for people who have everything they need in the Windows Store and prefer the peace of mind that comes with removing the risk of downloading apps from other places.

What do I do with my existing non-Store app? Desktop Bridge is the answer

With the Desktop Bridge you can easily package your current desktop application or game as an .appx, distribute through the Windows Store and target all Windows Desktop devices including Windows 10 S to increase your user reach and easier monetization.

You can package any desktop application such as: WPF, WinForms, MFC, VB6, etc.

Once completed, your users will enjoy from smooth installation and update experiences: Clean, simple and fast install/uninstall updates via differential packages, streaming and many more.

Now you can also modernize your app with the Universal Windows Platform (UWP) to increase user engagement and reach all Windows devices.

We have a lot of customers that already went through the process such as: Kodi, Slack, Evernote, Adobe Photoshop Elements 15 and many others.

Here are few customers that shared their stories:

  1. MusiXmatch is the world’s largest lyrics platform with millions of lyrics available online and more than 50 million users on various platforms
  2. Tale of Wuxia (侠客风云传) is a traditional desktop Win32 role-playing game (RPG) that was created by Heluo Studio
  3. CLIP STUDIO PAINT is the leading paint tool software that supports creation of animation and manga

A quote from Evernote:

“The Desktop Bridge vastly simplifies our [Evernote] installer and uninstaller. It also opens up UWP APIs including Live Tiles and notifications. And having the full-featured Evernote app in the Windows Store means future improvements will reach users faster.”

—Seth Hitchings, VP Engineering, Evernote

What should I do next?

  1. Register as an app developer in the Windows Dev Center
  2. Prepare to package your application
  3. Sign up and get started using the Desktop Bridge
  4. Package your current desktop application as an .appx
  5. Test your Windows app for Windows 10 S, you can also check out this blog post for more details
  6. Submit your app to the Windows Store

Resources

Did you find this post helpful? Please let us know in the comments below—and also let us know if there’s anything else you’d like us to dig into for you about this topic.

Enjoy!

Read More

Using color fonts for beautiful text and icons

In this post, we’ll introduce you to a text technology called color fonts. We’ll discuss what color fonts are, when they can be useful and how to use them in your Windows 10 apps.

What are color fonts?

Color fonts, also referred to as “multicolor fonts” or “chromatic fonts,” are a relatively new font technology that allows font designers to use multiple colors within each glyph of the font. Color fonts allow apps and websites to draw multicolored text with less code and more robust operating system support than ad-hoc techniques implemented above the text stack.

Most fonts for reading and writing—the fonts you are probably most familiar with—are not color fonts. These fonts define only the shape of the glyphs they contain, either with vector outlines or monochromatic bitmaps. At draw time, a text renderer fills the glyph shape using a single color (the “font color”) specified by the app or document being rendered.

Color fonts, on the other hand, contain color information in addition to shape information. Some approaches even allow fonts to include multiple color palettes, giving the font artistic flexibility. Color fonts typically include fallback information for platforms that do not support color fonts or for scenarios in which color functionality has been disabled. In those situations, color fonts are rendered as normal monochromatic fonts.

One color font you may be familiar with is Segoe UI Emoji—the default font used in Windows to display emoji. Below, you can see an example of a glyph from Segoe UI Emoji rendered in monochrome (left) and in color (right).

Why use color fonts?

Now that you know what color fonts are, let’s talk about how they can be useful.

Color fonts were originally designed to enable multicolored emoji in text communication scenarios. They excel at that task, but they are useful for other scenarios as well. Color fonts offer a way to implement rich text effects with the simplicity and functionality of regular fonts. To apps and the operating system, text rendered in a color font is the same as any other text: It can be copied and pasted, parsed by accessibility tools and so on.

Color fonts are a better alternative to raster graphics for rich text scenarios like website headers or document section titles. Although raster graphics are commonly used in these scenarios, they do not scale well to all display sizes, nor do they provide the same accessibility features as real text. If you find yourself frequently generating raster images of text from multicolored artwork, consider using a color font instead.

Color fonts can also be used for your app’s iconography. Some app developers prefer using icon fonts to standalone image files, due to the convenience and layout functionality offered by fonts. With color fonts, you can pack rich, scalable, full-color icons into a single icon font.

(Note: Starting in Windows 10 Creators Update, you can also achieve scalable vector iconography by using standalone SVG images directly in your XAML app. For more information, see Vector iconography: Using SVG images in your app.)

What kinds of color fonts does Windows support?

The OpenType specification defines several ways to embed color information in a font. Starting in Windows 10 Anniversary Update, Windows supports all of these approaches. The different approaches are summarized below.

Vector-based color fonts define glyph shapes using mathematical curves and lines. They may use the traditional font outline syntax coupled with color palettes (via OpenType’s ‘COLR’ and ‘CPAL’ tables), or they may use embedded SVG assets (via OpenType’s ‘SVG ’ table). These formats excel at representing most iconography compactly, and as vectors, they offer infinite scalability.

Bitmap-based color fonts define glyph shapes using embedded raster graphics, such as PNG images. They may use OpenType’s ‘CBDT’ and ‘CBLC’ tables, or they may use OpenType’s ‘sbix’ table. This approach makes it straightforward to control every pixel of a glyph’s shape and provide photorealistic content, but designers must provide multiple image sizes to ensure high-quality visual scaling.

Using color fonts

From both the developer’s perspective and the user’s perspective, color fonts are “just fonts.” They can be installed and uninstalled from the system in the same way as monochromatic fonts, they can be included in your app package as a local asset, or they can be used as a web font by your website.

In the XAML and Microsoft Edge frameworks, you can style just about any text with a color font in the same way as a regular font, and by default, your text will be rendered in color. However, if your app operates at a lower level and calls Direct2D APIs (or Win2D APIs) to render its text, then it must explicitly request color font rendering.

Using color fonts in XAML

The XAML platform’s text elements (like TextBlock, TextBox, RichEditBox, and FontIcon) support color fonts by default. Simply style your text with a color font, and the styled text will be rendered in color. The following code example shows how to style a TextBlock with a color font that has been packaged with your app assets. (The same technique applies to regular fonts.)


<TextBlock FontFamily="Assets/MyColorFont.otf#MyFontFamilyName">Here is some text.</TextBlock>

Applying a color font to a XAML TextBlock

The FontFamily property points to the relative location of a font file that has been added to the app package. Since a single font file may include multiple font families, you also need to specify the desired font family using the hash syntax illustrated above.

If you never want your XAML text element to render multicolor text, set its IsColorFontEnabled property to false. For example, you may choose to have your app render monochromatic text when accessibility features are enabled.

Using color fonts in Microsoft Edge

As with XAML, Edge supports rendering color fonts by default in websites and web apps, including the XAML WebView control. Simply use HTML and CSS to style your text with a color font, and the styled text will be rendered in color.

Using color fonts in Direct2D

In contrast to the UI frameworks, the lower-level graphics APIs, such as Direct2D and DirectWrite, do not render color glyphs by default. This is to avoid unexpected behavior changes in text-rendering apps that were designed prior to color font support.

If your app renders text with Direct2D’s DrawText and DrawTextLayout APIs, you must “opt in” to color glyph rendering. To do so, pass the D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT flag to the relevant drawing method. The following code example shows how to call Direct2D’s DrawText method to render a string in a color font:


// If m_textFormat points to a font with color glyphs, then the following 
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be filled with m_defaultFillBrush.
m_deviceContext->DrawText(
    m_string->Data(),
    m_string->Length(),
    m_textFormat.Get(),
    m_layoutRect,
    m_defaultFillBrush.Get(),
    D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT
    ); 

Drawing multicolored text with Direct2D’s DrawText method

Using color fonts in Win2D

Like Direct2D, Win2D’s text drawing APIs do not render color glyphs by default.

To opt in to color glyph rendering with Win2D, set the EnableColorFont options flag in the text format object your app passes to the text drawing method. The following code example shows how to render a string in a color font using Win2D:


// The text format that will be used to draw the text. (Declared elsewhere
// and initialized elsewhere by the app to point to a color font.)
CanvasTextFormat m_textFormat;

// Set the EnableColorFont option.
m_textFormat.Options = CanvasDrawTextOptions.EnableColorFont;

// If m_textFormat points to a font with color glyphs, then the following 
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be filled with m_color.
drawingSession.DrawText(
    m_string,
    m_point,
    m_color,
    m_textFormat
    );

Drawing multicolored text with Win2D’s DrawText method

Building OpenType SVG color fonts

Color fonts are a relatively recent development in font technology, so support among font-building tools is still in its early stages. Not all types of color font are supported by all font tools, but support continues to improve as color fonts gain popularity.

Building a font from scratch is a complex process, and it’s more than we can cover in this blog post. But color fonts aren’t just for professional type designers—if you’re an app or web designer with a monochromatic icon font, and you’d like to upgrade it to a color font, we’ve developed a small tool to help make the process easier: the OpenType SVG Font Editor.

This app lets you take an existing font and add color by embedding your own SVG artwork for each glyph using a simple drag-and-drop interface. SVG is a popular vector art format supported by tools like Adobe Illustrator and Inkscape. On platforms that support OpenType SVG fonts (like Windows apps, Edge and Firefox), the color glyphs are rendered. Other platforms will automatically fall back to the monochromatic glyphs. For more information, please see the OpenType SVG Font Editor’s GitHub page.

The tool was developed by a group of Microsoft interns on the Windows graphics team. We found the tool useful, so we’ve made it available as an open-source project for others to use and improve.

Conclusion

Color fonts are an exciting new technology that unlocks richer text scenarios than were previously possible without sacrificing platform support for accessibility, fallback, scalability, printing and complex font capabilities. For more information, please see the following resources:

Read More

Native Ads in Microsoft Advertising SDK

Overview

Native Ads is a component-based ad format that gives publishers the flexibility of placing the individual components of a creative – title, image, logo, description, call to action text – so as to provide the best possible fitment to the look and feel of the rest of the app. This enables the developers to use fonts, colors and animations of their own to stitch unobtrusive user experience in their app while earning high yield from advertising. For advertisers as well, this provides high performing placements since the ads experience is tightly built into the app and users tend to interact a lot more with such sponsored content. According to a report by Mobile Marketing, native in-app ads typically see five times greater engagement than traditional banner ads and, hence, get greater spend from advertisers as well (as per eMarketer and other reports).

Starting now, developers can create Native Ad slots in their apps or games using the latest version of Microsoft Advertising SDK (10.0.4 or later). Microsoft Monetization platform provides developers with the maximum amount of freedom to create their own presentations and is available to a limited set of publishers in a closed pilot. Please contact aiacare@microsoft.com to express your interest to be part of this pilot.

Where Do I Start?

As always, start with downloading the Microsoft Advertising SDK. This provides you the libraries to include Native Ads into your app or game.

Create a “Native” ad unit for your app in ‘Monetize with ads’ section on DevCenter (dev.windows.com). This is the ad unit that you will use in your app when you request for an ad in the code.

How Do I Get Native Ads Integrated into my App?

This section assumes that you are familiar with the Microsoft Advertising SDK for your UWP app or game. If you haven’t played around with this, consider going through the Get Started guide.

To show Native Ads in your app, follow the instructions for project type:

XAML/.NET

HTML/JavaScript

XAML/.NET

This section provides C# examples for your XAML/.NET project. You will need to go through these simple steps to get Native Ads in your code.

Step 1: Setup References

Open your project in Visual Studio. In Reference Manager, expand Universal Windows, click Extensions and then select the check box next to Microsoft Advertising SDK for XAML.

In appropriate code file in your app (for example, in MainPage.xaml.cs), add the following namespace reference.


using Microsoft.Advertising.WinRT.UI;

Step 2: Setting up Native Ads Manager

In an appropriate location in your app (for example in MainPage or some other page), declare a NativeAdsManager object and string fields that represent the application ID and ad unit ID for your Native Ad. The following code example assigns the myAppId and myAdUnitId fields to the test values for Native Ads provided in Test Mode values. These values are only used for testing; you must replace them with live values from Windows DevCenter before you publish your app.


NativeAdsManager nativeAdsManager = null;
string appId = "d25517cb-12d4-4699-8bdc-52040c712cab";
string adUnitId = "test";

In code that runs on startup, instantiate the NativeAdsManager.


// Ad Events

nativeAdsManager = new NativeAdsManager(appId, adUnitId);

Step 3: Request for an Ad

When you want to show an ad, request for one using the NativeAdsManager and wire up the events.


nativeAdsManager.RequestAd();

nativeAdsManager.AdReady += NativeAd_OnAdReady;

nativeAdsManager.ErrorOccurred += NativeAd_ErrorOccurred;

Step 4: Using components of the Ad to stitch up the experience

Assume you have a XAML page which has various placeholders for Title, Description, Sponsored By, Call To Action of an Ad and a container which contains all these elements. Sample StackPanel containing all the elements.


<StackPanel x:Name="NativeAdContainer" BorderThickness="2" BorderBrush="Azure">
   <StackPanel x:Name="IconImageContainer" BorderThickness="2" BorderBrush="Azure" Visibility="Collapsed" >
       <Image x:Name="IconImage" />
   </StackPanel>   
   <TextBox x:Name="TitleBox" Text="The title will go here" Margin="78,0,-78,0"/>
   <TextBox x:Name="DescriptionBox" Text="The Description will go here" Visibility="Collapsed" />
   <TextBox x:Name="SponsoredBy" Text="The SponsoredBy will go here" Visibility="Collapsed" />
   <StackPanel x:Name="MainImageContainer" BorderThickness="2" BorderBrush="Azure" Visibility="Collapsed">
        <Image x:Name="MainImage" Margin="0,8,0,4" />
   </StackPanel>
   <Button x:Name="CallToAction" Margin="0,8,0,4" Visibility="Collapsed" />
</StackPanel>

Based on components of the creative that you want to stitch up in your app, your code may differ. Here is a sample OnAdReady event listener where Title, Description, CallToAction and Image is being used.


void NativeAd_OnAdReady(object sender, object e)
        {
           NativeAd nativeAd = (NativeAd)e;
           TitleBox.Text = nativeAd.Title;
		
		//if description is not null show description textbox
           var description = nativeAd.Description;
           if (!string.IsNullOrEmpty(description))
           {
               DescriptionBox.Text = nativeAd.Description;
               DescriptionBox.Visibility = Visibility.Visible;
           }

           //if sponsoredBy is not null show sponsoredBy textbox
           var sponsoredBy = nativeAd.SponsoredBy;
           if (!string.IsNullOrEmpty(sponsoredBy))
           {
               SponsoredBy.Text = sponsoredBy;
               SponsoredBy.Visibility = Visibility.Visible;
           }

           //if CallToAction is not null update Button
           var callToAction = nativeAd.CallToAction;
           if (!string.IsNullOrEmpty(callToAction))
           {
               CallToAction.Content = callToAction;
               CallToAction.Visibility = Visibility.Visible;
           }

           // Assets consists further information about Ad
           var assets = nativeAd.AdditionalAssets;

           // Loading images
           var icon = nativeAd.IconImage;
           if (icon != null)
           {
               var bitmapImage = new BitmapImage();
               bitmapImage.UriSource = new Uri(nativeAd.IconImage.Url);
               IconImage.Source = bitmapImage;
               // Best view when using the Height and Width of the image given
               IconImage.Height = nativeAd.IconImage.Height;
               IconImage.Width = nativeAd.IconImage.Width;

               IconImageContainer.Visibility = Visibility.Visible;
            }

            // There might be multiple main images sent by the server
            var mainImages = nativeAd.MainImages;
            if (mainImages.Count > 0)
            {
                var mainImage = mainImages[0];
                var bitmapImage = new BitmapImage();
                bitmapImage.UriSource = new Uri(mainImage.Url);
                MainImage.Source = bitmapImage;
                // Best view when using the Height and Width of the image given
                MainImage.Height = mainImage.Height;
                MainImage.Width = mainImage.Width;

                MainImageContainer.Visibility = Visibility.Visible;
            }

            // It is required to show the AdIcon in your container
            NativeAdContainer.Children.Add(nativeAd.AdIcon);

            // Register any xaml framework element for clicks/impressions
            nativeAd.RegisterAdContainer(NativeAdContainer);

P.S: The developer is required to “Register” the XAML ad container (any framework Element) with the Native Ads object. This is required for handling impressions and click tracking and is critical for ad earnings. Failure to do so may result in ad-units and advertising payouts being blocked by Microsoft.

HTML/JavaScript

More details on the HTML feature will be coming soon! Please reach out to us (aiacare@microsoft.com) if your apps are in HTML/JS and you need this feature.

Guidelines

Even though the developer has complete control over how to create the ad experience and which components of the creative is displayed to the user, the advertiser’s creative should get its due message out to the user. There is a fine balance that needs to be achieved to reap maximum value from the Native Ad.

Here are some guidelines to ensure the balance.

Required to Show

There are two advertiser assets that must always be shown to the user in your Native Ad design. Failing to include any of these could result in low performance of your ad unit and eventual low (or no) yield. These assets are:

  • Ad Title
  • Either Distinguishable ad icon (This Ad Icon is sent as part of NativeAd object – property named AdIcon) or Sponsored By or texts such as ‘Sponsored’, ‘Promoted’, ‘Recommended’

Not following these guidelines may result in the removal of the adUnits from the advertising system.

Ad Experience

Your Native Ad should be clearly delineated from the rest of your content and have space around it to prevent accidental clicks. Use border, background or some other treatment to separate the ad content. Always remember, getting user to accidentally click on the ad is not beneficial in the longer term for your ads based revenue and for end user experience.

You should always show the distinguishable “Ad” icon in the ad view. Whenever possible, show the “Sponsored By” field to clearly call out that the content is an ad and provided by an advertiser.

Text Display Requirements

Native Ads should always have the Title displayed. Provide enough space to display at least 25 characters of the title. If the title is longer, ensure to replace the additional text with an ellipsis.

Ensure that the Call-to-Action (CTA) is separated out from the rest of the promotional text from the advertiser.

If you choose the rest of the promotional text (Description) from the ad response, provide space to display at least 75 characters of the same. It’s best to use animations to show the full content of the ad description.

Call-to-Action

Native Ads should always have the CTA displayed to the user as something clickable like a button or hyperlink.

CTA string should always be displayed in its entirety as it is a critical component of the advertiser’s creative.

Learn and Optimize

It is recommended that different ad units are created and used for each different placement of Native Ads in the app. This enables reporting and learning for each placement which then can be used for optimizing each placement separately till optimal performance is achieved.

In case of any further queries, please reach out to aiacare@microsoft.com and we’ll be glad to help you out.

Read More

Announcing Project Rome iOS SDK

Project Rome is a platform for enabling seamless cross-device and cross-platform experiences. The philosophy behind Project Rome is simple. App experiences shouldn’t be tied to a single device any more than data should be tied to a single device. Your apps, like your data, should travel with you.

Previously, this meant switching between devices, while maintaining a single user experience, on a different Windows device. A few months ago, Project Rome features were extended to the Android platform, allowing you to start an app session on your Android phone and continue it on a Windows PC, an Xbox One or even a Surface Hub.

Now, Project Rome support is also being extended to the iOS platform. You can download the Project Rome SDK for iOS here.

Revisiting the Contoso music app

If you have been following the evolution of Project Rome, you’ll be familiar with our developer friend Paul and his example Contoso Music app. Paul was originally introduced in a blog post on Cross-device experiences to help us understand a typical Project Rome scenario.

He expanded his UWP music streaming app to run across multiple Windows devices tied to the same Microsoft Account (MSA). Using Project Rome, Paul changed how his app worked so a user streaming a song on a Windows PC could then transfer that song to his Xbox. Then, as he got ready to go out for a run, he could transfer the current playlist to his Windows Phone.

In the subsequent post, Paul developed an Android version of Contoso Music app and used the Project Rome Android SDK to allow a user to start playing a song on her Android phone and continue playing it on a Windows device when he or she got home. The Contoso Music app was now cross-platform, transferring smoothly from one platform to the next.

Extending to iOS

Let’s imagine that based on the success of his Windows and Android versions, Paul develops an iOS version of Contoso Music. When examining his telemetry after a few months, Paul sees that all his apps are doing well, like his Windows and Android versions. However, there is a common theme in the user feedback; users are finding it difficult handling device switching. So, Paul wants to enable a scenario in which a user can listen to music on the iPhone over headphones, then enter the living room and immediately switch to playing the same music over his Xbox, connected to quality speakers.

With the Project Rome iOS SDK, Paul can create a bridge between iOS devices and Windows devices in two stages:

  • The RemoteSystems API allows the app to discover Windows devices the user owns. The RemoteSystems API will allow the Contoso Music app to discover these devices on the same network or through the cloud.
  • Once discovered, the RemoteLauncher API will launch the Contoso Music app on another Windows device.

How Paul gets it done

In order for Paul’s user to switch from playing music on an iOS device to a Windows device, his app must find out about the other device. This action requires using MSA OAuth to get permission to query for devices and then attempting to discover additional devices, as shown in the diagram below.


// Asynchronously initialize the Rome Platform.
  // Pass in self as class implements the CDOAuthCodeProviderDelegate protocol.
  [CDPlatform startWithOAuthCodeProviderDelegate:self completion:^(NSError* clientError) {
                                              if (clientError)
                                              {
                                                  // Handle error
                                                  return;
                                              }

                                              // Handle success, show discovery screen
                                      }];

// Implementation of CDOAuthCodeProviderDelegate
// The Rome SDK calls this delegate method when it needs an OAuth Access Code from the application.
- (NSError*)getAccessCode:(NSString*)signinUrl completion: (void (^)(NSError* error, NSString* accessCode))completion {

// Stash away the callback the SDK gives us
_getTokenCallback = completion;

  // Show the interactive OAuth Web View flow.
  // Once the OAuth flow completes or fails, invoke this callback.
  ...

// Return nil as there was no error
  return nil;
}

Once initialized, Paul’s app can discover all devices in the user’s MSA device graph by initiating discovery using CDRemoteSystemDiscoveryManager. Information about discovered devices are raised through the CDRemoteSystemDiscoveryManagerDelegate protocol. In In our example, we store each discovered device within an NSMutableArray property called discoveredSystems.


// Create instance and pass ‘self’ as the delegate as it implements CDRemoteSystemDiscoveryManagerDelegate.
CDRemoteSystemDiscoveryManager* remoteSystemDiscoveryManager = [[CDRemoteSystemDiscoveryManager alloc] initWithDelegate:self];

// Start discovery.
[remoteSystemDiscoveryManager startDiscovery];

// CDRemoteSystemDiscoveryManagerDelegate implementation
- (void)remoteSystemDiscoveryManager:
            (CDRemoteSystemDiscoveryManager*)discoveryManager
                             didFind:(CDRemoteSystem*)remoteSystem {
  @synchronized(self) {
     [self.discoveredSystems addObject:remoteSystem];
      // Refresh UI based upon updated state in discoveredSystems e.g. populate table
   }
}

- (void)remoteSystemDiscoveryManager:
            (CDRemoteSystemDiscoveryManager*)discoveryManager
                           didUpdate:(CDRemoteSystem*)remoteSystem {
  NSString* id = remoteSystem.id;

// Loop through and update the Remote System instance if previously seen.
  @synchronized(self) {
    for (unsigned i = 0; i < self.discoveredSystems.count; i++) {
      CDRemoteSystem* currentRemoteSystem =
          [self.discoveredSystems objectAtIndex:i];
      NSString* currentId = currentRemoteSystem.id;

      if ([currentId isEqualToString:id]) {
        [self.discoveredSystems replaceObjectAtIndex:i withObject:remoteSystem];
        break;
      }
    }

       // Refresh UI based upon updated state in discoveredSystems e.g. populate table
  }
}

The user can now select the device he wants to transfer music to from the list of devices that have been discovered. From the selected CDRemoteSystem, an instance of CDRemoteSystemConnectionRequest is instantiated as shown in the sequence diagram below. Using CDRemoteLauncher, Paul is then able to remotely launch the app on the selected device while also including necessary additional contextual information, such as the song currently playing.

Here’s how to remote-launch http://www.bing.com to your device:


// Create a connection request using the CDRemoteSystem instance selected by the user
  CDRemoteSystemConnectionRequest* request =
       // Using the RemoteSystem above, [self.discoveredSystems addObject:remoteSystem];
      [[CDRemoteSystemConnectionRequest alloc] initWithRemoteSystem:system];

NSString* url = @”http://www.bing.com”;

  [CDRemoteLauncher
           launchUri:uri
           withRequest:request
           withCompletion:^(CDRemoteLauncherUriStatus status) {
            // Update UI on launch status
            }];

Voila! Paul has easily augmented his app with cross-device support for iOS.

Wrapping up

Project Rome breaks down barriers by changing notions about what an “app” is and focusing on the user no matter where they are working or what device they are using. An app no longer necessarily means something that is tied to a given device, instead it can be something that exists between your devices and is optimized for the right device at the right time. Today, Project Rome works on Windows 10, Android and iOS. Stay tuned to see what comes next.

To learn more about Project Rome, check out the links below.

Read More

Now available: Windows Developer training course on Desktop Bridge

We are happy to announce that the Microsoft Virtual Academy training course, Developer’s Guide to the Desktop Bridge, is now available on demand.

This video course, delivered by the Desktop Bridge Program Management team, aims to help developers understand the concepts and benefits of the Desktop Bridge tooling in the Windows 10 Universal Windows Platform. Watch the video and find the relevant sample code here to start bringing your desktop apps to the Windows Store and to take advantage of new Windows 10 features of the Universal Windows Platform in your WPF, WinForms, MFC or other type of Win32 apps.

Do you want to distribute your desktop application in the Windows Store? We cover that in the course. Do you want to take advantage of modern Windows 10 app-to-app features in your existing desktop application? We cover that in the course. Do you want to light-up Windows 10 features, and still distribute your app to Windows 7 users? We cover that, too. Modernizing your desktop app gradually with UWP components? We cover all of these and more in the course.

There are eight modules:

  1. Intro to the Desktop Bridge
  2. Desktop App Converter
  3. Debugging and Testing Your Converted Apps
  4. Distributing Your Converted Apps
  5. Enhancing Desktop Applications with UWP Features
  6. Extending and Modernizing with UWP components
  7. What’s Next for the Desktop Bridge
  8. Post-Course Survey

For more information on the Desktop Bridge, please visit the Windows Dev Center.

Ready to submit your app to the Windows Store? Let us know!

Feedback or feature suggestions? Submit them on User Voice.

Read More

Monetizing your app: Use interstitial banner as fallback for interstitial video

Do you show ads while loading your app or between levels of your game (also known as interstitial ads)?

Microsoft Advertising now offers interstitial banners as an option for ads in your app. Interstitial ads have a higher monetization value, but have a lower fill rate in many markets. You can choose to use an interstitial banner when a video ad is not available.

Another option is to request both a video ad and an interstitial banner ad and show whichever ad is ready at the time of loading the app.

The code below is an example of how you can show either a video ad or a banner ad – whichever is ready first for you to load your app.

Add this to the cs file of the page that you want to load the interstitial ad:


//Add the Ads reference:
		using Microsoft.Advertising.WinRT.UI;
	//Initialize the ads:
		InterstitialAd MyVideoAd;
		InterstitialAd MyBannerAd;
	//Intiialize the Adunits:
		var MyAppID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx";
             // video adunit
            var MyVideoAdUnitId = "xxxxxxxx";
            // Interstitial banner adunit
            var MyAdUnitId = "xxxxxxxxx";
            //Request the ads:
            // instantiate an InterstitialAd
            MyVideoAd = new InterstitialAd();
            MyBannerAd = new InterstitialAd();
           // wire up all 4 events, see below for function template
            MyVideoAd.AdReady += MyVideoAd_AdReady;
            MyVideoAd.ErrorOccurred += MyVideoAd_ErrorOccurred;
            MyVideoAd.Completed += MyVideoAd_Completed;
            MyVideoAd.Cancelled += MyVideoAd_Cancelled;
            MyBannerAd.AdReady += MyBannerAd_AdReady;
            // pre-fetch an ad 30-60 seconds before you need it
            MyVideoAd.RequestAd(AdType.Video, MyAppID, MyVideoAdUnitId);
            MyBannerAd.RequestAd(AdType.Display, MyAppID, MyAdUnitId);

	//write the code for the events
void MyVideoAd_AdReady(object sender, object e)
        {
            // code
            if (!bannerready)
            {
                MyVideoAd.Show();
                videoready = true;
            }
        }
        void MyBannerAd_AdReady(object sender, object e)
        {
            // code
            if (!videoready)
            {
                MyBannerAd.Show();
                bannerready = true;
            }
        }
        void MyVideoAd_ErrorOccurred(object sender, AdErrorEventArgs e)
        {
            var A = MyVideoAd.State;
        }



        void MyVideoAd_Completed(object sender, object e)
        {
            var A = MyVideoAd.State;
        }
        void MyVideoAd_Cancelled(object sender, object e)
        {
            var A = MyVideoAd.State;
        }

Stay tuned over the next few weeks for additional tips to increase ad monetization.

Read More

Monetizing your app: Advertisement placement

App developers are free to place their ads in any part of their app; this allows developers for some level of flexibility to blend the ad experience into their app for best results. We have seen that developers who take the time to do this get the best performance from their ads and are therefore able to earn more advertising revenue.

There are essentially two major factors to consider when placing an ad:

1. Optimize for Viewability – Over the last few years, advertisers are moving toward tracking the viewability of the advertisements, and for that reason are only paying for ads when they are viewable. Also, advertisers are willing to pay more for viewable impressions.

The Microsoft Ads SDK sends information back to the advertisers about whether an ad was viewable or not. It is recommended that you place advertisements in areas of your app where they have a greater chance of being viewed. For example, on the scoreboard of your game app, the viewable area of a scrolling text app or ensuring that the ad is not hidden by other UX elements such as a button.

Note: If you hide an advertisement behind another UX element, this is considered ‘fraud’ and it’s likely that the application will be removed from the Windows Store if detected.

2. Optimize for Clicks – Many different types of ads serve on your app. Ads can be classified by the way the advertiser pays for the ad — either pay for each impression, pay for each click or pay for each conversion. While Microsoft Advertising pays based on an impression measure of revenue (eCPM – effective cost per a thousand impressions served in your app), a number of advertisers only pay for clicks (CPC – cost per click). The effective clicks help calculate the eCPM that is finally paid out to the developer.

Ad networks also track apps that have a higher click-through rate (CTR), and these apps are generally targeted more heavily by ad campaigns overall. We see that, in general, apps that get higher revenue are apps that have a better click-through rate.

Note: You can track the impressions, clicks, CTR and revenue in the Advertising Performance section under “Analytics” in the Dev Center Dashboard.

Stay tuned for additional tips to increase ad monetization over the next few weeks.

Read More

Monetizing your app: Use Interactive Advertising Bureau ad sizes

Are you looking for ways to better monetize your app using ads? App developers can boost their ad revenue using simple optimizations while building and managing their app. In a series of blogs, including this one, we will offer tips that will help you better monetize your app.

Tip #1: Use Interactive Advertising Bureau (IAB) sizes for your ad.

As an app developer, you can choose the size of your ad based on the look and feel of the app itself. You should have an ad experience that blends well with your app – ads that do not fit in with the rest of the app experience perform poorly and yield low revenue for the developer. Also, you can choose to have multiple ads on a single page. This, however, has proven to result in lower engagement from the user and, hence, lower yield.

We recommend designing your ad using one of the IAB sizes. Most advertisers prefer to advertise in those sizes and more options are available to be shown on your app, which will increase the yield of your app. The most common IAB sizes are:

Mobile:

300 x 50

320 x 50

PC:

728 x 90

300 x 250

160 x 1600

300 x 600

These sizes are also documented in our MSDN Article.

Stay tuned for additional tips to increase ad monetization over the next few weeks.

Read More

Announcing UWP Community Toolkit 1.4

The UWP Community Toolkit is on its fourth release today. The previous version was packed with new controls, so we decided to focus on stabilizations and improvements on existing controls and services in version 1.4.

Among the improvements: better accessibility for all controls according to our contribution rules. Now every control can be used with keyboard, mouse and touch inputs. We also ensured that the controls provide enough information for Narrator to make them compatible with screen readers.

We also introduced a new project (and a new NuGet package) called Microsoft.Toolkit.Uwp.DeveloperTools. The goal of this project is to provide support tools for developers. For this first version of the project we started with two controls:

  • FocusTracker: Can be used in your application to display information about the current focused control (name, type, etc.). This is extremely useful when you want to ensure that your application is accessible.
  • AlignmentGrid: Can be used to display a grid, helping you align controls on your pages.

Developer tools are not meant to be deployed with your app, but rather used during development to help improve the overall quality of your app.

Along with the above improvements and stabilizations, we also added new features to this release. Here are a few of the main additions:

  1. Carousel: A new control that presents items in a list, where the selected item is always in the center and other items are flowing ­around it. This reacts not only to the content but also to layout changes, so it can adapt to different form factors automatically. The carousel can be horizontal or vertical.
  2. ViewExtensions: ApplicationViewExtensions, StatusBarExtensions & TitleBarExtensions provide a declarative way of setting AppView, StatusBar & TitleBar properties from XAML.
  3. NetworkHelper: Provides functionality to monitor changes in network connection, and allows users to query for network information without additional lookups.
  4. Saturation: Provides a behavior to selectively saturate a XAML element. We also introduced the CompositionBehaviorBase to ease creation of new composition-based behaviors (Blur now uses this).
  5. Twitter streaming API support: Twitter Service was missing support for Twitter’s streaming service; we added support for live tweets and events.
  6. Search box for Sample App: The new Sample App allows you to search for a sample directly from the main menu.

This is only a partial list of the changes in UWP Community Toolkit 1.4. For a complete overview of what’s new in version 1.4, please read our release note on GitHub.

You can get started by following this tutorial, or preview the latest features by installing the UWP Community Toolkit Sample App from the Windows Store.

As a reminder, the toolkit can be used in any app (across PC, Xbox One, mobile, HoloLens and Surface Hub devices) targeting Windows 10 November Update (10.0.10586) or above. The few features that rely on newer OS updates are clearly marked in the documentation and in the Sample App.

If you would like to contribute, please join us on GitHub!

Read More