Load AdScript intenally

THEOplayer · Jul 22, 2024 · 314a22c · 314a22c
1 parent 9c8d27e
commit 314a22c
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 23 deletions.
diff --git 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
-
-<script>
-    // The script is available on the official AdScript documentation:
-    // https://adscript.admosphere.cz/en_adScript_browser.html
-</script>
-```
-
 ## 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
@@ -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,14 +55,15 @@ 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 {
         this.adScriptIntegration?.updateMetadata(metadata);
     }
 
     /**
-     * Destroy
+     * Destroy the connector.
      */
     destroy(): void {
         this.destroyed = true;

diff --git 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
@@ -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);
+}