Z tego przewodnika dowiesz się, jak zintegrować pakiet SDK PAL z aplikacją LG webOS, wysłać żądanie nonce i zarejestrować wyświetlenia reklam.
Wymagania wstępne
Zanim zaczniesz korzystać z tego przewodnika, utwórz podstawową aplikację LG webOS. Aby ją skonfigurować, możesz użyć interfejsu wiersza poleceń webOS lub webOS Studio. Więcej informacji znajdziesz w przewodniku Tworzenie pierwszej aplikacji.
Wygeneruj nonce
„Nonce” to pojedynczy zaszyfrowany ciąg znaków wygenerowany przez PAL za pomocą NonceLoader.
Pakiet SDK PAL wymaga, aby każdemu nowemu żądaniu strumienia towarzyszyła nowo wygenerowana liczba jednorazowa. Jednak wartości nonce mogą być ponownie używane w wielu żądaniach reklamy w ramach tego samego strumienia.
Gdy wygenerujesz aplikację za pomocą webOS CLI lub webOS Studio, utworzy się plik HTML, który zawiera zależność webOSTV.js. PAL wymaga tej zależności do działania. Więcej informacji znajdziesz w dokumentacji webOSTV.js.
Dodaj zależność dla pakietu SDK PAL na urządzenia CTV w pliku index.html. Za tagiem skryptu dla webOSTV.js wczytaj tag skryptu. Przykład znajdziesz w tym pliku:index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="LG app for PAL sdk"/>
<title>LG app for PAL sdk</title>
<link rel="stylesheet" href="style.css"/>
<script src="path/to/webOSTVjs/webOSTV.js" charset="utf-8"></script>
<script src="https://imasdk.googleapis.com/pal/sdkloader/pal_ctv.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<hgroup>
<h1>LG app for PAL sdk</h1>
</hgroup>
</header>
<div id="placeholder-video"></div>
</body>
</html>
Następnie utwórz plik JavaScript, aby wygenerować wartość nonce. Ten krok obejmuje proces PAL, który polega na utworzeniu NonceLoader, utworzeniu NonceRequest, a następnie wysłaniu żądania nonce przy użyciu NonceLoader.loadNonceManager().
let videoElement;
let nonceLoader;
let managerPromise;
let nonceManager;
let playbackStarted = false;
/**
* Initializes the PAL loader.
*/
function init() {
videoElement = document.getElementById('placeholder-video');
videoElement.addEventListener('mousedown', onVideoTouch);
videoElement.addEventListener('touchstart', onVideoTouch);
videoElement.addEventListener('play', function() {
if (!playbackStarted) {
sendPlaybackStart();
playbackStarted = true;
}
});
videoElement.addEventListener('ended', sendPlaybackEnd);
videoElement.addEventListener('error', function() {
// Handle video error.
sendPlaybackEnd();
});
// PAL automatically determines whether limited ads apply based on the TCF
// data found on the page. You can optionally use the `forceLimitedAds`
// parameter to manually enable limited ads regardless of the TCF data.
const consentSettings = new goog.pal.ConsentSettings();
nonceLoader = new goog.ctv.pal.NonceLoader(consentSettings);
generateNonce();
}
/**
* Generates a nonce with sample arguments.
*
* The NonceRequest parameters set here are example parameters.
* You should set your parameters based on your own app characteristics.
*/
function generateNonce() {
const request = new goog.ctv.pal.NonceRequest();
request.adWillAutoPlay = true;
request.adWillPlayMuted = false;
request.continuousPlayback = false;
request.descriptionUrl = 'https://example.com';
request.iconsSupported = true;
request.playerType = 'Sample Player Type';
request.playerVersion = '1.0';
request.ppid = 'Sample PPID';
request.sessionId = 'Sample SID';
// Player support for VPAID 2.0, OMID 1.0, and SIMID 1.1
request.supportedApiFrameworks = '2,7,9';
request.url = 'https://developers.google.com/ad-manager/pal/ctv';
request.videoHeight = 480;
request.videoWidth = 640;
managerPromise = nonceLoader.loadNonceManager(request);
managerPromise
.then(function(manager) {
nonceManager = manager;
})
.catch((error) => {
// Handle nonce generating error.
});
}
window.addEventListener("load", function(event) {
init();
});
Dołączanie wartości nonce do żądania reklamy
Aby użyć wygenerowanej wartości nonce, przed wysłaniem żądań reklamy dołącz do tagu reklamy parametr givn i wartość nonce.
/**
* The ad tag for your ad request, for example:
* https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=
*
* For more sample ad tags, see https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags
*/
const DEFAULT_AD_TAG = "Your ad tag";
...
managerPromise = nonceLoader.loadNonceManager(request);
managerPromise
.then(function(manager) {
nonceManager = manager;
// Append the nonce to the ad tag URL.
makeAdRequest(DEFAULT_AD_TAG + "&givn=" + nonceString);
})
Jeśli wysyłasz żądania reklam do Google i je renderujesz, musisz renderować ikonę AdChoices i nakładkę.
Śledzenie zdarzeń odtwarzania
Na koniec musisz wdrożyć różne procedury obsługi zdarzeń dla odtwarzacza. Na potrzeby testów możesz dołączyć je do zdarzeń kliknięcia przycisku, ale w rzeczywistym wdrożeniu będą one wywoływane przez odpowiednie zdarzenia odtwarzacza:
/**
* Informs PAL that an ad click has occurred. How this function is
* called will vary depending on your ad implementation.
*/
function sendAdClick() {
if (nonceManager) {
nonceManager.sendAdClick();
}
}
/**
* Handles the user touching on the video element, passing it to PAL.
* @param {!TouchEvent|!MouseEvent} touchEvent
*/
function onVideoTouch(touchEvent) {
if (nonceManager) {
nonceManager.sendAdTouch(touchEvent);
}
}
/** Informs PAL that playback has started. */
function sendPlaybackStart() {
if (nonceManager) {
nonceManager.sendPlaybackStart();
}
}
/** Informs PAL that playback has ended. */
function sendPlaybackEnd() {
if (nonceManager) {
nonceManager.sendPlaybackEnd();
}
}
W swojej implementacji wywołuj funkcję sendPlaybackStart po rozpoczęciu sesji odtwarzania filmu. Funkcja sendPlaybackEnd powinna być wywoływana po zakończeniu sesji odtwarzania filmu. sendAdClick należy wywoływać za każdym razem, gdy użytkownik kliknie reklamę. sendAdTouch należy wywoływać przy każdej interakcji dotykowej z odtwarzaczem.
(Opcjonalnie) Wysyłanie sygnałów Google Ad Managera przez serwery reklamowe firm zewnętrznych
Skonfiguruj żądanie serwera reklam innej firmy wysyłane do Ad Managera.
Skonfiguruj serwer reklamowy firmy zewnętrznej tak, aby w żądaniu wysyłanym do Ad Managera uwzględniał wartość nonce. Oto przykład tagu reklamy skonfigurowanego na serwerze reklamowym firmy zewnętrznej:
'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'
Więcej informacji znajdziesz w przewodniku po implementacji po stronie serwera w Google Ad Managerze.
Ad Manager szuka znaku givn=, aby zidentyfikować wartość nonce. Serwer reklamowy firmy zewnętrznej musi obsługiwać własne makro, np. %%custom_key_for_google_nonce%%, i zastąpić je parametrem zapytania nonce podanym w poprzednim kroku. Więcej informacji o tym, jak to zrobić, znajdziesz w dokumentacji serwera reklam firmy zewnętrznej.
To wszystko. Parametr nonce powinien być teraz przekazywany z pakietu PAL SDK przez serwery pośredniczące do Google Ad Managera. Umożliwia to lepsze zarabianie dzięki Google Ad Managerowi.