diff --git a/adscript/README.md b/adscript/README.md index e9d3fe18..2cfc1fe1 100644 --- a/adscript/README.md +++ b/adscript/README.md @@ -18,18 +18,6 @@ npm install @theoplayer/adscript-connector-web yarn add @theoplayer/adscript-connector-web ``` -## Prerequisites - -First you need to initialize the AdScript Measurement by including the script in your app's html. - -```html - - -``` - ## Usage First you need to add the AdScript connector to your app : diff --git a/adscript/src/integration/AdScriptConnector.ts b/adscript/src/integration/AdScriptConnector.ts index 44399cab..9ea97547 100644 --- a/adscript/src/integration/AdScriptConnector.ts +++ b/adscript/src/integration/AdScriptConnector.ts @@ -2,6 +2,7 @@ import type { ChromelessPlayer } from 'theoplayer'; import { AdScriptTHEOIntegration } from './AdScriptTHEOIntegration'; import { AdScriptConfiguration } from './AdScriptConfiguration'; import { MainVideoContentMetadata } from '../adscript/AdScript'; +import { loadAdScriptSDK } from './LoadAdScriptSDK'; export class AdScriptConnector { private readonly player: ChromelessPlayer; @@ -16,14 +17,21 @@ export class AdScriptConnector { * Constructor for the THEOplayer AdScript connector. * @param player a THEOplayer instance reference * @param configuration a configuration object for the AdScript connector - * @param metadata the MainVideoContentMetadata + * @param initialMetadata the MainVideoContentMetadata * @returns */ - constructor(player: ChromelessPlayer, configuration: AdScriptConfiguration, metadata: MainVideoContentMetadata) { + constructor( + player: ChromelessPlayer, + configuration: AdScriptConfiguration, + initialMetadata: MainVideoContentMetadata + ) { this.player = player; this.configuration = configuration; - this.metadata = metadata; + this.metadata = initialMetadata; + + // This loads the external AdScript SDK script. This is not immediately available, so we start a timer. this.initialLoadTime = new Date().getTime(); + loadAdScriptSDK(configuration.implementationId); this.createAdScriptIntegrationWhenApiIsAvailable(); } @@ -47,6 +55,7 @@ export class AdScriptConnector { /** * Update the medata. + * For more information, see the [main content information settings](https://adscript.admosphere.cz/en_adScript_browser.html) section. * @param metadata The MainVideoContentMetadata. */ updateMetadata(metadata: MainVideoContentMetadata): void { @@ -54,7 +63,7 @@ export class AdScriptConnector { } /** - * Destroy + * Destroy the connector. */ destroy(): void { this.destroyed = true; diff --git a/adscript/src/integration/AdScriptTHEOIntegration.ts b/adscript/src/integration/AdScriptTHEOIntegration.ts index 013de5af..c0c78374 100644 --- a/adscript/src/integration/AdScriptTHEOIntegration.ts +++ b/adscript/src/integration/AdScriptTHEOIntegration.ts @@ -44,21 +44,23 @@ export class AdScriptTHEOIntegration { private JHMTApi = window.JHMTApi; private JHMT = window.JHMT; - constructor(player: ChromelessPlayer, configuration: AdScriptConfiguration, metadata: MainVideoContentMetadata) { + constructor( + player: ChromelessPlayer, + configuration: AdScriptConfiguration, + initialMetadata: MainVideoContentMetadata + ) { this.player = player; this.logger = new Logger(Boolean(configuration.debug)); this.adProcessor = configuration?.adProcessor; - this.mainContentMetadata = metadata; + this.mainContentMetadata = initialMetadata; // Set the additional information about the logged user. - for (const id in configuration.i12n) { - this.logger.onSetI12N(id, configuration.i12n[id]); - this.JHMTApi.setI12n(id, configuration.i12n[id]); + if (configuration.i12n) { + this.updateUser(configuration.i12n); } // Set the metadata before attaching event listeners. - this.logger.onSetMainVideoContentMetadata(this.mainContentMetadata); - this.JHMTApi.setContentMetadata(this.mainContentMetadata); + this.updateMetadata(initialMetadata); this.reportPlayerState(); this.addListeners(); @@ -70,6 +72,14 @@ export class AdScriptTHEOIntegration { this.JHMTApi.setContentMetadata(this.mainContentMetadata); } + public updateUser(i12n: { [key: string]: string }): void { + // Set the additional information about the logged user. + for (const id in i12n) { + this.logger.onSetI12N(id, i12n[id]); + this.JHMTApi.setI12n(id, i12n[id]); + } + } + public destroy() { this.removeListeners(); } diff --git a/adscript/src/integration/LoadAdScriptSDK.ts b/adscript/src/integration/LoadAdScriptSDK.ts new file mode 100644 index 00000000..0c7dc74a --- /dev/null +++ b/adscript/src/integration/LoadAdScriptSDK.ts @@ -0,0 +1,51 @@ +// @ts-nocheck + +/** + * This function loads the AdScript SDK. + * This comes directly from the AdScript documentation: https://adscript.admosphere.cz/en_adScript_browser.html + */ +export function loadAdScriptSDK(implementationId: string) { + !(function (j, h, m, t, c, z) { + c = c || 'JHMT'; + j[c] = j[c] || []; + j['JHMTApiProtocol'] = 'https:'; + z = z || 3; + + var i = (z % 3) + 1, + a = arguments.callee, + b = h.createElement('script'); + + (b.async = !0), + b.readyState + ? (b.onreadystatechange = function () { + ('loaded' !== b.readyState && 'complete' !== b.readyState) || + ((b.onreadystataechange = null), j.JHMTApi.init(c, m, t)); + }) + : (b.onload = function () { + j.JHMTApi.init(c, m, t); + }), + (b.src = j['JHMTApiProtocol'] + '//cm' + i + '.jhmt.cz/api.js'), + (b.onerror = function () { + b.parentNode.removeChild(b); + z++; + i = (z % 3) + 1; + a(j, h, m, t, c, i); + }), + h.getElementsByTagName('head')[0].appendChild(b); + + try { + var it = setInterval(function () { + if (typeof j.JHMTApi !== 'undefined') { + clearInterval(it); + } else { + b.parentNode.removeChild(b); + z++; + i = (z % 3) + 1; + a(j, h, m, t, c, i); + } + }, 1e3); + } catch (e) { + console.log('JHMT: ' + e); + } + })(window, document, implementationId); +}