none
Native ads in Xbox UWP app click problem RRS feed

  • Question

  • Hello.

    I'm trying to implement Native ads in my UWP app for Xbox and I have a problem.

    I put Button into list of clickable elements and it works fine with mouse click, but on Xbox when I'm pressing "A" key on focused  button, nothing happens (advertised product not opening in browser). Keyboard "Enter" on selected button on PC do not work too.

    I've tried another scenario with Native Ad in GridView. I put GridViewItem (parent element of my native ad) into list of clickable elements and it works with mouse click and keyboard Enter on focused GridViewItem (with ad inside), but still nothing on Xbox.

    Not sure if I'm doing something wrong or missing something. Would be grateful for some help.

    Friday, July 13, 2018 9:37 PM

All replies

  • Hi Fetisenko,
    We can’t give an accurate analysis without the actual code according to the situation you described.
    Could you post the code of Native Ads section? With the code we can analyze it better.
    Best Regards
    Daisy  Tian

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, July 16, 2018 8:38 AM
    Moderator
  • Here is my sample code.

    Xaml code of sample page:

    <Page
        x:Class="XboxNativeAds.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:XboxNativeAds"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="300"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <TextBlock Text="Static ad"/>
    
            <StackPanel Grid.Row="1" x:Name="NativeAdContainer" Background="#555555" Width="Auto" Height="Auto"
                Orientation="Vertical">
                <Image x:Name="AdIconImage" HorizontalAlignment="Left" VerticalAlignment="Center"
               />
                <TextBlock x:Name="TitleTextBlock" HorizontalAlignment="Left" VerticalAlignment="Center"
               Text="The ad title will go here" FontSize="24" Foreground="White"/>
                <TextBlock x:Name="DescriptionTextBlock" HorizontalAlignment="Left" VerticalAlignment="Center"
                   Foreground="White" TextWrapping="Wrap" Text="The ad description will go here"
                    Visibility="Collapsed"/>
                <Image x:Name="MainImageImage" HorizontalAlignment="Left"
               VerticalAlignment="Center" Visibility="Collapsed"/>
                <Button x:Name="CallToActionButton" Background="Gray" Foreground="White"
                HorizontalAlignment="Left" VerticalAlignment="Center" Width="Auto" Height="Auto"
                Content="The call to action text will go here" Margin="20,20,20,20"
                Visibility="Collapsed"/>
                <StackPanel x:Name="SponsoredByStackPanel" Orientation="Horizontal">
                    <TextBlock x:Name="SponsoredByTextBlock" Text="The ad sponsored by text will go here"
                       FontSize="24" Foreground="White" Margin="20,0,0,0" HorizontalAlignment="Left"
                       VerticalAlignment="Center" Visibility="Collapsed"/>
                    <Image x:Name="IconImageImage" Margin="40,20,20,20" HorizontalAlignment="Left"
                   VerticalAlignment="Center" Visibility="Collapsed"/>
                </StackPanel>
            </StackPanel>
    
            <TextBlock Grid.Column="1" Text="Ad in GridViewItem"/>
    
            <GridView Grid.Column="1" Grid.Row="1">
                <GridViewItem x:Name="GridViewItem_withAd">
                    <Grid>
                        <StackPanel x:Name="NativeAdContainer_gridview" Background="#555555" Width="Auto" Height="Auto"
                Orientation="Vertical">
                            <Image x:Name="AdIconImage_gridview" HorizontalAlignment="Left" VerticalAlignment="Center"
               />
                            <TextBlock x:Name="TitleTextBlock_gridview" HorizontalAlignment="Left" VerticalAlignment="Center"
               Text="The ad title will go here" FontSize="24" Foreground="White"/>
                            <TextBlock x:Name="DescriptionTextBlock_gridview" HorizontalAlignment="Left" VerticalAlignment="Center"
                   Foreground="White" TextWrapping="Wrap" Text="The ad description will go here"
                    Visibility="Collapsed"/>
                            <Image x:Name="MainImageImage_gridview" HorizontalAlignment="Left"
               VerticalAlignment="Center" Visibility="Collapsed"/>
                            <Button x:Name="CallToActionButton_gridview" Background="Gray" Foreground="White"
                HorizontalAlignment="Left" VerticalAlignment="Center" Width="Auto" Height="Auto"
                Content="The call to action text will go here" Margin="20,20,20,20"
                Visibility="Collapsed"/>
                            <StackPanel x:Name="SponsoredByStackPanel_gridview" Orientation="Horizontal">
                                <TextBlock x:Name="SponsoredByTextBlock_gridview" Text="The ad sponsored by text will go here"
                       FontSize="24" Foreground="White" Margin="20,0,0,0" HorizontalAlignment="Left"
                       VerticalAlignment="Center" Visibility="Collapsed"/>
                                <Image x:Name="IconImageImage_gridview" Margin="40,20,20,20" HorizontalAlignment="Left"
                   VerticalAlignment="Center" Visibility="Collapsed"/>
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </GridViewItem>
                <GridViewItem>
                    <Grid>
                        <TextBlock Text="Some text here."/>
                    </Grid>
                </GridViewItem>
            </GridView>
        </Grid>
    </Page>

    C# code behind:

    public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
    
                myNativeAdsManager = new NativeAdsManagerV2(myAppId, myAdUnitId);
                myNativeAdsManager.AdReady += MyNativeAd_AdReady;
                myNativeAdsManager.ErrorOccurred += MyNativeAdsManager_ErrorOccurred;
    
                myNativeAdsManager.RequestAd();
    
    
                // ad in gridview
                myNativeAdsManager_gridview = new NativeAdsManagerV2(myAppId, myAdUnitId);
                myNativeAdsManager_gridview.AdReady += MyNativeAd_gridview_AdReady;
                myNativeAdsManager_gridview.ErrorOccurred += MyNativeAdsManager_ErrorOccurred;
    
                myNativeAdsManager_gridview.RequestAd();
            }
    
            NativeAdsManagerV2 myNativeAdsManager = null;
            NativeAdsManagerV2 myNativeAdsManager_gridview = null;
            string myAppId = "d25517cb-12d4-4699-8bdc-52040c712cab";
            string myAdUnitId = "test";
    
            void MyNativeAd_AdReady(object sender, NativeAdReadyEventArgs e)
            {
                NativeAdV2 nativeAd = e.NativeAd;
    
                // Show the ad icon.
                if (nativeAd.AdIcon != null)
                {
                    AdIconImage.Source = nativeAd.AdIcon.Source;
    
                    // Adjust the Image control to the height and width of the 
                    // provided ad icon.
                    AdIconImage.Height = nativeAd.AdIcon.Height;
                    AdIconImage.Width = nativeAd.AdIcon.Width;
                }
    
                // Show the ad title.
                TitleTextBlock.Text = nativeAd.Title;
    
                // Show the ad description.
                if (!string.IsNullOrEmpty(nativeAd.Description))
                {
                    DescriptionTextBlock.Text = nativeAd.Description;
                    DescriptionTextBlock.Visibility = Visibility.Visible;
                }
    
                // Display the first main image for the ad. Note that the service
                // might provide multiple main images. 
                if (nativeAd.MainImages.Count > 0)
                {
                    NativeImage mainImage = nativeAd.MainImages[0];
                    BitmapImage bitmapImage = new BitmapImage();
                    bitmapImage.UriSource = new Uri(mainImage.Url);
                    MainImageImage.Source = bitmapImage;
    
                    // Adjust the Image control to the height and width of the 
                    // main image.
                    MainImageImage.Height = 100;
                    MainImageImage.Width = 200;
                    MainImageImage.Visibility = Visibility.Visible;
                }
    
                // Add the call to action string to the button.
                if (!string.IsNullOrEmpty(nativeAd.CallToActionText))
                {
                    CallToActionButton.Content = nativeAd.CallToActionText;
                    CallToActionButton.Visibility = Visibility.Visible;
                }
    
                // Show the ad sponsored by value.
                if (!string.IsNullOrEmpty(nativeAd.SponsoredBy))
                {
                    SponsoredByTextBlock.Text = nativeAd.SponsoredBy;
                    SponsoredByTextBlock.Visibility = Visibility.Visible;
                }
    
                // Show the icon image for the ad.
                if (nativeAd.IconImage != null)
                {
                    BitmapImage bitmapImage = new BitmapImage();
                    bitmapImage.UriSource = new Uri(nativeAd.IconImage.Url);
                    IconImageImage.Source = bitmapImage;
    
                    // Adjust the Image control to the height and width of the 
                    // icon image.
                    IconImageImage.Height = nativeAd.IconImage.Height;
                    IconImageImage.Width = nativeAd.IconImage.Width;
                    IconImageImage.Visibility = Visibility.Visible;
                }
    
                // Register the container of the controls that display
                // the native ad elements for clicks/impressions.
                //nativeAd.RegisterAdContainer(NativeAdContainer);
                var list = new List<FrameworkElement>();
                list.Add(CallToActionButton);
    
                nativeAd.RegisterAdContainer(NativeAdContainer, list);
            }
    
            void MyNativeAd_gridview_AdReady(object sender, NativeAdReadyEventArgs e)
            {
                NativeAdV2 nativeAd = e.NativeAd;
    
                // Show the ad icon.
                if (nativeAd.AdIcon != null)
                {
                    AdIconImage_gridview.Source = nativeAd.AdIcon.Source;
    
                    // Adjust the Image control to the height and width of the 
                    // provided ad icon.
                    AdIconImage_gridview.Height = nativeAd.AdIcon.Height;
                    AdIconImage_gridview.Width = nativeAd.AdIcon.Width;
                }
    
                // Show the ad title.
                TitleTextBlock_gridview.Text = nativeAd.Title;
    
                // Show the ad description.
                if (!string.IsNullOrEmpty(nativeAd.Description))
                {
                    DescriptionTextBlock_gridview.Text = nativeAd.Description;
                    DescriptionTextBlock_gridview.Visibility = Visibility.Visible;
                }
    
                // Display the first main image for the ad. Note that the service
                // might provide multiple main images. 
                if (nativeAd.MainImages.Count > 0)
                {
                    NativeImage mainImage = nativeAd.MainImages[0];
                    BitmapImage bitmapImage = new BitmapImage();
                    bitmapImage.UriSource = new Uri(mainImage.Url);
                    MainImageImage_gridview.Source = bitmapImage;
    
                    // Adjust the Image control to the height and width of the 
                    // main image.
                    MainImageImage_gridview.Height = 100;
                    MainImageImage_gridview.Width = 200;
                    MainImageImage_gridview.Visibility = Visibility.Visible;
                }
    
                // Add the call to action string to the button.
                if (!string.IsNullOrEmpty(nativeAd.CallToActionText))
                {
                    CallToActionButton_gridview.Content = nativeAd.CallToActionText;
                    CallToActionButton_gridview.Visibility = Visibility.Visible;
                }
    
                // Show the ad sponsored by value.
                if (!string.IsNullOrEmpty(nativeAd.SponsoredBy))
                {
                    SponsoredByTextBlock_gridview.Text = nativeAd.SponsoredBy;
                    SponsoredByTextBlock_gridview.Visibility = Visibility.Visible;
                }
    
                // Show the icon image for the ad.
                if (nativeAd.IconImage != null)
                {
                    BitmapImage bitmapImage = new BitmapImage();
                    bitmapImage.UriSource = new Uri(nativeAd.IconImage.Url);
                    IconImageImage_gridview.Source = bitmapImage;
    
                    // Adjust the Image control to the height and width of the 
                    // icon image.
                    IconImageImage_gridview.Height = nativeAd.IconImage.Height;
                    IconImageImage_gridview.Width = nativeAd.IconImage.Width;
                    IconImageImage_gridview.Visibility = Visibility.Visible;
                }
    
                // Register the container of the controls that display
                // the native ad elements for clicks/impressions.
                //nativeAd.RegisterAdContainer(NativeAdContainer);
                var list = new List<FrameworkElement>();
                list.Add(GridViewItem_withAd); // GridViewItem_withAd clickable element here !!!!
    
                nativeAd.RegisterAdContainer(NativeAdContainer_gridview, list);
            }
    
            private void MyNativeAdsManager_ErrorOccurred(object sender, NativeAdErrorEventArgs e)
            {
                System.Diagnostics.Debug.WriteLine("NativeAd error " + e.ErrorMessage +
                    " ErrorCode: " + e.ErrorCode.ToString());
            }
        }

    And this for better Xbox controller navigation in App.cs:

    public App()
            {
                ...
    
                Application.Current.RequiresPointerMode = ApplicationRequiresPointerMode.WhenRequested;
            }
    Monday, July 16, 2018 11:38 AM
  • Hi Fetisenko,
    Have you installed a browser on your Xbox? If you installed, could you please comment this code in App.xaml.cs (Application. Current. RequiresPointerMode = ApplicationRequiresPointerMode. WhenRequested; ) and try it again ? 
    Best Regards
    Daisy  Tian

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, July 18, 2018 7:29 AM
    Moderator
  • Hello Daisy.

    I have browser on my Xbox.

    Without this code (Application. Current. RequiresPointerMode = ApplicationRequiresPointerMode. WhenRequested; ) I can successfully click on both ads and it redirecting me to an advertised product (Visual Studio in my case) site in browser. But, I don't need cursor pointer on Xbox app.

    Wednesday, July 18, 2018 10:30 AM
  • Hello.

    Are there any news about this issue?

    Is this some kind of bug or it's not suppose to work on Xbox this way?

    If it's a bug, when some bug fix can be expected?

    Wednesday, August 1, 2018 12:37 PM