Wszystkie aplikacje, które wyświetlają spersonalizowane reklamy hostowane przez Google, muszą implementować ikonę i nakładkę AdChoices, jeśli są one udostępniane przez Google. Informacja (nazywana też „Dlaczego ta reklama?”) to funkcja związana z przejrzystością, która wyjaśnia użytkownikom, dlaczego wyświetla im się konkretna reklama, i dostarcza informacji o sposobie ochrony ich prywatności.
Więcej informacji znajdziesz w artykule Dlaczego widzisz tę reklamę.
Z tego przewodnika dowiesz się, jak wyodrębnić informacje niezbędne do prawidłowego wdrożenia Informacji z odpowiedzi XML VAST reklamy lub odpowiedzi z metadanymi strumienia DAI.
Wymagania dotyczące renderowania Informacji
Aby spełnić wymagania Google dotyczące renderowania ikon Informacja, Twoja aplikacja lub witryna musi spełniać te standardy:
- Ikona Informacja musi być wyświetlana jako nakładka na każdą reklamę, dla której jest udostępniana.
- Ikona Informacja musi być wyświetlana w pozycji wskazanej przez właściwości „X location” i „Y location” zawarte w danych ikony oraz w rozmiarze określonym przez właściwości width i height w pikselach niezależnych od gęstości (DP).
- Ikona Informacja nie może być zasłonięta przez inne nakładki reklamowe ani elementy interfejsu.
- Na platformach z obsługą kliknięć lub ich odpowiedników (np. dotyku lub zdalnego wybierania) ikona Informacja musi być klikalna.
- Na platformach z obsługą przeglądarki kliknięcie ikony Informacja musi powodować otwarcie karty lub okna przeglądarki z adresem URL określonym we właściwości „ClickThrough” lub „click_data”.
- Na platformach bez obsługi przeglądarki kliknięcie ikony Informacja musi powodować otwarcie nakładki modalnej z jednym z obrazów określonych we właściwości „IconClickFallbackImage” lub „click_fallback_images”.
- Na platformach bez obsługi przeglądarki obraz zastępczy musi być wyświetlany w rozmiarze określonym we właściwości „IconClickFallbackImage” lub „click_fallback_images” w pikselach niezależnych od gęstości (DP).
Parsowanie Informacji z odpowiedzi XML VAST
W przypadku pracy z odpowiedzią na żądanie reklamy XML Informacja jest obsługiwana tylko w VAST w wersji 3.0 i nowszych. Informacja jest implementowana jako ikona VAST.
VAST 4.2
Jeśli odpowiedź XML reklamy jest zgodna ze standardem VAST 4.2 , Informacja jest dostarczana jako ikona VAST. Jeśli Twoja aplikacja lub witryna w pełni obsługuje ikony VAST 4.2 (sekcja 3.11 standardu VAST 4.2), obsługa Informacji nie wymaga żadnych dodatkowych działań.
Jeśli Twoja aplikacja nie obsługuje ikon VAST 4.2, musisz ręcznie przeanalizować ikony z nazwą programu „GoogleWhyThisAd” z odpowiedzi VAST na podstawie tego standardu. Do dodatkowych testów w aplikacji możesz użyć tego przykładowego kodu XML VAST 4.2.
Przykładowa odpowiedź VAST 4.2
<?xml version="1.0" encoding="UTF-8"?>
<VAST version="4.2">
<Ad id="20011">
<Wrapper>
...
<Creatives>
...
<Creative id="5480" sequence="1">
...
<Linear>
...
<Icons>
...
<Icon program="GoogleWhyThisAd" width="40" height="30" xPosition="left" yPosition="100" duration="00:00:10" offset="00:00:00" apiFramework="VAST" altText="AdChoices icon">
<StaticResource creativeType="image/png">
<![CDATA[ https://storage.googleapis.com/interactive-media-ads/hosted-samples/wta/icon_adchoices.png ]]>
</StaticResource>
<IconClicks>
<IconClickThrough>
<![CDATA[ https://g.co/adsettings ]]>
</IconClickThrough>
<IconClickFallbackImages>
<IconClickFallbackImage width="950" height="600">
<AltText>
<![CDATA[ This ad was shown to you based on: * Google's estimation of your interests, based on your activity on Google on this device (for example, your searches) * the information on the website you were viewing. ]]>
</AltText>
<StaticResource creativeType="image/png">
<![CDATA[ https://storage.googleapis.com/interactive-media-ads/hosted-samples/wta/icon_adchoices_fallback_image.png ]]>
</StaticResource>
</IconClickFallbackImage>
...
</IconClickFallbackImages>
</IconClicks>
</Icon>
...
</Icons>
...
</Linear>
...
</Creative>
...
</Creatives>
...
</Wrapper>
...
</Ad>
</VAST>
VAST 3.0
Jeśli odpowiedź XML reklamy jest zgodna ze standardem VAST 3.0, Informacja jest dostarczana jako połączenie ikony VAST i niestandardowego rozszerzenia VAST. Jeśli Twoja aplikacja lub witryna w pełni obsługuje standard ikon VAST 3.0 i jeśli platforma może przejść do docelowego adresu URL ikony i go wyświetlić, obsługa Informacji nie wymaga żadnych dodatkowych działań.
Jeśli Twoja platforma nie może przejść do adresów URL kliknięć i ich wyświetlić (dotyczy to głównie urządzeń, które nie mają zintegrowanej przeglądarki internetowej), musisz zaimplementować obsługę rozszerzenia „IconFallbackImages”. To rozszerzenie zawiera zestaw tagów „IconFallbackImages”, w których atrybut „program” pasuje do ikony zawartej w VAST.
Aby w pełni obsługiwać Informację, tag IconFallbackImages z nazwą programu „GoogleWhyThisAd” musi być powiązany z ikoną o nazwie programu „GoogleWhyThisAd”, tak aby po interakcji użytkownika z ikoną wyświetlał się powiązany obraz zastępczy.
Aby obsługiwać potencjalne przyszłe zmiany w standardzie Informacja, zdecydowanie zalecamy dodanie obsługi obrazów zastępczych dla wszystkich ikon VAST, jeśli są dostępne. Do dodatkowych testów w aplikacji możesz użyć tego przykładowego kodu XML VAST 3.0.
Struktura rozszerzenia IconFallbackImages
| Tag | Atrybuty | Opis |
|---|---|---|
| Extension | typ | W przypadku tego rozszerzenia typ zawsze zawiera wartość IconClickFallbackImages.
|
| -IconClickFallbackImages | program | Ten atrybut zawsze pasuje do atrybutu program powiązanej ikony VAST 3.0. |
Struktura tego węzła jest zgodna ze standardem VAST 4.2 dla IconClickFallbackImages, z wyjątkiem dodania atrybutu program.
|
||
| --IconClickFallbackImage | szerokość | Preferowana szerokość wyświetlania obrazu. |
| wysokość | Preferowana wysokość wyświetlania obrazu. | |
| ---AltText | Dostępny opis obrazu. | |
| ---StaticResource | creativeType | Typ MIME obrazu zastępczego. |
| Wartość CDATA zawierająca adres URL obrazu zastępczego. |
Przykładowa odpowiedź VAST 3.0
<?xml version="1.0" encoding="UTF-8"?>
<VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="3.0">
<Ad id="123456">
<InLine>
...
<Creatives>
...
<Creative id="7891011" AdID="ABCD123456EF" sequence="1">
...
<Linear>
...
<Icons>
...
<Icon program="GoogleWhyThisAd" width="50" height="50" xPosition="20" yPosition="bottom" duration="00:00:10" offset="00:00:00" apiFramework="VAST" altText="Why This Ad?">
<StaticResource creativeType="image/png">
<![CDATA[https://storage.googleapis.com/interactive-media-ads/hosted-samples/wta/icon_adchoices.png]]>
</StaticResource>
<IconClicks>
...
<IconClickThrough><![CDATA[https://g.co/adsettings]]></IconClickThrough>
</IconClicks>
</Icon>
...
</Icons>
...
</Linear>
...
</Creative>
...
</Creatives>
<Extensions>
...
<Extension type="IconClickFallbackImages">
...
<IconClickFallbackImages program="GoogleWhyThisAd">
<IconClickFallbackImage width="400" height="150">
<AltText>Alt icon fallback</AltText>
<StaticResource creativeType="image/png"><![CDATA[https://storage.googleapis.com/gvabox/nickchavez/media/png/wta_dialog.png]]></StaticResource>
</IconClickFallbackImage>
...
</IconClickFallbackImages>
...
</Extension>
...
</Extensions>
...
</InLine>
...
</Ad>
</VAST>
Parsowanie Informacji z metadanych JSON interfejsu DAI API
W przypadku pracy z interfejsem DAI API szczegóły Informacji są przekazywane przez obiekt JSON zwracany przez żądania do adresu URL metadanych.
Obiekt JSON metadanych zawiera listę reklam, których kluczem jest adID. W każdym obiekcie reklamy znajduje się tablica ikon. Jeśli dana reklama korzysta z Informacji, ikona Informacja znajduje się w tej tablicy.
Format ikony JSON
Format ikony JSON jest w miarę możliwości tłumaczeniem 1:1 ze standardu ikon VAST 4.2 (sekcja 3.11). Aby jednak obsługiwać bardziej rygorystyczny format JSON, w razie potrzeby zmieniliśmy nazwy niektórych atrybutów.
Format ikony JSON
| program | W przypadku ikony Informacja ta wartość zawsze zawiera ciąg „GoogleWhyThisAd”. |
| x_position | Położenie poziome lewego górnego rogu ikony względem lewego górnego rogu kreacji wideo w pikselach. To pole akceptuje też wartości pozycji responsywnej „right” lub „left”. |
| y_position | Pozycja w pionie lewego górnego rogu ikony względem lewego górnego rogu kreacji wideo w pikselach. To pole akceptuje też wartości pozycji responsywnej „top” lub „bottom”. |
| szerokość | Szerokość ikony w pikselach. |
| wysokość | Wysokość ikony w pikselach. |
| creative_type | Typ MIME obrazu podanego dla ikony. Domyślnie „image/png”. |
| zasób | Adres URL, z którego można pobrać ikonę Informacja. |
| alt_text | Tekst alternatywny do renderowania ikony Informacja. |
| click_data | Obiekt zawierający właściwość click_data.url, która reprezentuje adres URL, do którego mają być kierowani widzowie, jeśli klikną ikonę Informacja na platformie obsługującej przeglądanie internetu.
|
| click_fallback_images | Tablica obiektów obrazów do wyświetlania widzom, którzy klikną ikonę Informacja na platformach nieobsługujących przeglądania internetu. |
Format obrazu zastępczego JSON
| szerokość | Szerokość obrazu zastępczego w pikselach. |
| wysokość | Wysokość obrazu zastępczego w pikselach. |
| creative_type | Typ MIME obrazu zastępczego. Domyślnie „image/png”. |
| zasób | Adres URL, z którego można pobrać obraz zastępczy. |
| alt_text | Tekst alternatywny do renderowania obrazu zastępczego. |
Przykładowy kod JSON metadanych
{
...
"ads": {
...
"0002640412_ad1": {
...
"icons": [
...
{
"alt_text": "AdChoices icon",
"click_data": {
"url": "https://g.co/adsettings"
},
"click_fallback_images": [
{
"alt_text": "This ad was shown to you based on: * Google's estimation of your interests, based on your activity on Google on this device (for example, your searches) * the information on the website you were viewing.",
"creative_type": "image/jpg",
"height": 600,
"resource": "https://storage.googleapis.com/interactive-media-ads/hosted-samples/wta/icon_adchoices_fallback_image.png",
"width": 950
}
],
"creative_type": "image/png",
"height": 30,
"program": "AdChoices",
"resource": "https://storage.googleapis.com/interactive-media-ads/hosted-samples/wta/icon_adchoices.png",
"type": "static",
"width": 40,
"x_position": "0",
"y_position": "100"
}
...
]
...
},
...
}
...
}