Eine Beispiel-App, in der mit PAL eine Nonce generiert wird, finden Sie auf GitHub.
In dieser Anleitung wird das PAL SDK in eine Samsung Tizen-Anwendung eingebunden, eine Nonce angefordert und Anzeigenimpressionen registriert.
Vorbereitung
Bevor Sie mit dieser Anleitung beginnen, müssen Sie eine einfache Tizen-App erstellen. Sie können die Tizen IDE verwenden, um die App einzurichten. Weitere Informationen finden Sie in diesem Video zum Einstieg in Tizen.
Nonce generieren
Eine „Nonce“ ist ein einzelner verschlüsselter String, der von PAL mit dem NonceLoader generiert wird.
Für jede neue Streamanfrage muss mit dem PAL SDK eine neu generierte Nonce gesendet werden. Nonces können jedoch für mehrere Anzeigenanfragen innerhalb desselben Streams wiederverwendet werden.
Erstellen Sie eine HTML-Datei für Ihre App. Fügen Sie die webapis.js-Abhängigkeit in Ihre HTML-Datei ein. Für die PAL ist diese Abhängigkeit erforderlich. Weitere Informationen finden Sie in der Samsung WebApi-Dokumentation.
Fügen Sie der Datei index.html eine Abhängigkeit für das CTV PAL SDK hinzu. Laden Sie das Script-Tag nach dem Script-Tag für webapis.js. Ein Beispiel finden Sie in der folgenden index.html-Datei.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="$WEBAPIS/webapis/webapis.js"></script>
<script src="//imasdk.googleapis.com/pal/sdkloader/pal_ctv.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<hgroup>
<h1>Samsung Tizen app for PAL sdk</h1>
</hgroup>
</header>
<div id="placeholder-video"></div>
</body>
</html>
Für PAL-Spamsignale sind bestimmte Tizen-Berechtigungen erforderlich, damit sie richtig funktionieren. Erstellen Sie eine config.xml-Datei mit den folgenden Berechtigungserklärungen:
"http://tizen.org/privilege/internet""http://tizen.org/privilege/system""http://tizen.org/privilege/telephony""http://tizen.org/privilege/tv.inputdevice""http://developer.samsung.com/privilege/network.public""http://developer.samsung.com/privilege/productinfo"
Das folgende Code-Snippet zeigt ein Beispiel für eine config.xml-Datei:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/BasicProject" version="1.0.0" viewmodes="maximized">
<tizen:application id="PACKAGE_STRING.BasicProject" package="PACKAGE_STRING" required_version="2.3"/>
<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
<icon src="icon.png"/>
<tizen:metadata key="http://tizen.org/metadata/app_ui_type/base_screen_resolution" value="extensive"/>
<name>BasicProject</name>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
<tizen:privilege name="http://tizen.org/privilege/system"/>
<tizen:privilege name="http://tizen.org/privilege/telephony"/>
<tizen:privilege name='http://tizen.org/privilege/tv.inputdevice'/>
<tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
<tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
<tizen:profile name="tv-samsung"/>
<tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
<access origin="*" subdomains="true"/>
</widget>
Erstellen Sie dann eine JavaScript-Datei, um eine Nonce zu generieren. Dieser Schritt umfasst den PAL-Workflow zum Erstellen eines NonceLoader, zum Erstellen eines NonceRequest und zum Anfordern eines Nonce mit NonceLoader.loadNonceManager().
let videoElement;
let nonceLoader;
let managerPromise;
let nonceManager;
let playbackStarted = false;
/**
* Initializes the PAL loader.
*/
function init() {
const 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();
});
// The default value for the `allowStorage` parameter is false. You must
// set this value to true to let PAL determine whether limited ads applies
// based on the TCF data. You can optionlly use the `forceLimitedAds`
// parameter to enable limited ads regardless of the TCF data.
const consentSettings = new goog.pal.ConsentSettings();
consentSettings.allowStorage = true;
nonceLoader = new goog.ctv.pal.NonceLoader(consentSettings);
generateNonce();
}
/**
* Generates a nonce with sample arguments and logs it to the console.
*
* 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();
});
Nonce an die Anzeigenanfrage anhängen
Wenn Sie die generierte Nonce verwenden möchten, hängen Sie vor dem Senden Ihrer Anzeigenanfragen einen givn-Parameter und den Nonce-Wert an Ihr Anzeigen-Tag an.
/**
* 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);
})
Wiedergabeereignisse erfassen
Schließlich müssen Sie verschiedene Ereignishandler für Ihren Player implementieren. Zu Testzwecken können Sie diese an Schaltflächenklickereignisse anhängen. In einer echten Implementierung werden sie jedoch durch die entsprechenden Player-Ereignisse ausgelöst:
/**
* 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();
}
}
In Ihrer Implementierung sollte sendPlaybackStart aufgerufen werden, sobald die Videowiedergabe beginnt. sendPlaybackEnd sollte aufgerufen werden, sobald die Videowiedergabe beendet ist. sendAdClick sollte jedes Mal aufgerufen werden, wenn der Zuschauer auf eine Anzeige klickt. sendAdTouch sollte bei jeder Touch-Interaktion mit dem Player aufgerufen werden.
(Optional) Google Ad Manager-Signale über Ad-Server von Drittanbietern senden
Konfigurieren Sie die Anfrage des Drittanbieter-Ad-Servers für Ad Manager.
Konfigurieren Sie den Ad-Server eines Drittanbieters so, dass die Nonce in der Serveranfrage an Ad Manager enthalten ist. Hier sehen Sie ein Beispiel für ein Anzeigen-Tag, das auf dem Ad-Server eines Drittanbieters konfiguriert wurde:
'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'
Weitere Informationen finden Sie im Leitfaden zur serverseitigen Implementierung von Google Ad Manager.
In Ad Manager wird nach givn= gesucht, um den Nonce-Wert zu ermitteln. Der Drittanbieter-Ad-Server muss ein eigenes Makro wie %%custom_key_for_google_nonce%% unterstützen und es durch den Nonce-Abfrageparameter ersetzen, den Sie im vorherigen Schritt angegeben haben. Weitere Informationen dazu finden Sie in der Dokumentation des Ad-Servers des Drittanbieters.
Geschafft! Der Nonce-Parameter sollte jetzt vom PAL SDK über Ihre Vermittlungsserver an Google Ad Manager weitergegeben werden. So lässt sich die Monetarisierung über Google Ad Manager verbessern.