@raydiant/playlist-window-manager 0.18.0 → 0.20.0-rc.1

package/build/PlaylistWindowManager.d.ts

@@ -89,6 +89,7 @@ export default class PlaylistWindowManager extends EventEmitter {
     private evalRuleEngine;
     private handleEnableInterruptLock;
     private handleDisableInterruptLock;
+    private handleAnalyticsEvent;
     private handleCurrentPresentationComplete;
     private handleCurrentPresentationError;
     private handleNextPresentationError;

package/build/PlaylistWindowManager.js

@@ -109,6 +109,11 @@ var PlaylistWindowManager = /** @class */ (function (_super) {
                 _this.endCurrentPresentation();
             }
         };
+        _this.handleAnalyticsEvent = function (event) {
+            // Emit the event on the current window. Only the current window should
+            // send analytics events since the next window is not visible.
+            _this.emitCurrentWindowEvent('window_analytics_event', event);
+        };
         _this.handleCurrentPresentationComplete = function () { return __awaiter(_this, void 0, void 0, function () {
             var logger, isThrottled, now, timeSinceLastComplete, delay, _a, next, preview, nextPreviewPresentationId;
             var _this = this;
@@ -693,6 +698,7 @@ var PlaylistWindowManager = /** @class */ (function (_super) {
                         this.currentWindow.onError(this.handleCurrentPresentationError);
                         this.currentWindow.onEnableInterruptLock(this.handleEnableInterruptLock);
                         this.currentWindow.onDisableInterruptLock(this.handleDisableInterruptLock);
+                        this.currentWindow.onAnalyticsEvent(this.handleAnalyticsEvent);
                         return [4 /*yield*/, this.currentWindow.load()];
                     case 1:
                         _a.sent();
@@ -896,6 +902,7 @@ var PlaylistWindowManager = /** @class */ (function (_super) {
                             this.currentWindow.onError(this.handleCurrentPresentationError);
                             this.currentWindow.onEnableInterruptLock(this.handleEnableInterruptLock);
                             this.currentWindow.onDisableInterruptLock(this.handleDisableInterruptLock);
+                            this.currentWindow.onAnalyticsEvent(this.handleAnalyticsEvent);
                         }
                         // Play new current window.
                         this.playCurrentWindow();

package/build/PresentationWindow.d.ts

@@ -1,7 +1,7 @@
 import * as RE from '@raydiant/playlist-rule-engine';
 import PlaylistWindowManagerState from './PlaylistWindowManagerState';
 import PlaylistWindowManager from './PlaylistWindowManager';
-import { Presentation, ApplicationVersion, Theme, Device, PresentationWindowRenderer, WindowBounds, Logger, BuilderState, WorkerState } from './types';
+import { Presentation, ApplicationVersion, Theme, Device, PresentationWindowRenderer, WindowBounds, Logger, BuilderState, WorkerState, AnalyticsEvent } from './types';
 export interface PresentationWindowOptions {
     windowManager?: PlaylistWindowManager;
     windowId: string;
@@ -49,6 +49,7 @@ export default class PresentationWindow {
     private isChildWindowLocked;
     private enableInterruptLockCallback;
     private disableInterruptLockCallback;
+    private analyticsEventCallback;
     private builderState;
     private presentation;
     private playlistWindowManagerState;
@@ -73,6 +74,7 @@ export default class PresentationWindow {
     onError(callback: ((err: Error) => void) | null): void;
     onEnableInterruptLock(callback: (() => void) | null): void;
     onDisableInterruptLock(callback: (() => void) | null): void;
+    onAnalyticsEvent(callback: ((event: AnalyticsEvent) => void) | null): void;
     isReady(): boolean;
     isComplete(): boolean;
     isPlaying(): boolean;
@@ -101,6 +103,7 @@ export default class PresentationWindow {
     private closeChildWindow;
     private enableInteruptLock;
     private disableInteruptLock;
+    private getEmbeddedAppUrl;
     private handleEmbeddedMessage;
     private handleLegacyMessage;
     private handleReady;

package/build/PresentationWindow.js

@@ -67,6 +67,15 @@ var defaultAppRendererUrl = 'https://apps.raydiant.com/3.0.0/index.html';
 var isValidNumber = function (value) {
     return typeof value === 'number' && !isNaN(value);
 };
+var isValidAnalyticsEvent = function (value) {
+    return value &&
+        typeof value === 'object' &&
+        typeof value.type === 'string' &&
+        typeof value.source === 'string' &&
+        (typeof value.productCategory === 'string' ||
+            value.productCategory === undefined ||
+            value.productCategory === null);
+};
 var PresentationWindow = /** @class */ (function () {
     function PresentationWindow(options) {
         var _this = this;
@@ -87,6 +96,7 @@ var PresentationWindow = /** @class */ (function () {
         this.isChildWindowLocked = {};
         this.enableInterruptLockCallback = null;
         this.disableInterruptLockCallback = null;
+        this.analyticsEventCallback = null;
         this.forceMute = false;
         this.error = null;
         this.workerState = {};
@@ -168,6 +178,12 @@ var PresentationWindow = /** @class */ (function () {
                         }
                         break;
                     }
+                    case 'analytics-event': {
+                        if (this.analyticsEventCallback && isValidAnalyticsEvent(payload)) {
+                            this.analyticsEventCallback(payload);
+                        }
+                        break;
+                    }
                     default: {
                         this.logWarning("Received unknown embedded message type: " + type);
                     }
@@ -400,6 +416,9 @@ var PresentationWindow = /** @class */ (function () {
     PresentationWindow.prototype.onDisableInterruptLock = function (callback) {
         this.disableInterruptLockCallback = callback;
     };
+    PresentationWindow.prototype.onAnalyticsEvent = function (callback) {
+        this.analyticsEventCallback = callback;
+    };
     PresentationWindow.prototype.isReady = function () {
         // TODO: To support the 'ready' event in embedded apps, they will need to tell the
         // runtime that it should wait for ready instead of DOMLoaded. This could be a "wait
@@ -449,7 +468,7 @@ var PresentationWindow = /** @class */ (function () {
                         _a = this.options, applicationVersion = _a.applicationVersion, windowId = _a.windowId;
                         if (!this.isEmbeddedApp()) return [3 /*break*/, 3];
                         if (!applicationVersion.embeddedUrlFormat) return [3 /*break*/, 2];
-                        url = embeddedApps_1.default(this.presentation, applicationVersion);
+                        url = this.getEmbeddedAppUrl();
                         this.logInfo("Reload window '" + windowId + "' for embedded app url '" + url + "'");
                         return [4 /*yield*/, this.loadWindow(url)];
                     case 1:
@@ -466,7 +485,11 @@ var PresentationWindow = /** @class */ (function () {
         });
     };
     PresentationWindow.prototype.runGetProperties = function (builderState) {
-        this.sendMessage('run_get_properties', builderState);
+        // Do no support conditional properties for embedded apps. We will likely
+        // change the way conditional properties work.
+        if (!this.isEmbeddedApp()) {
+            this.sendMessage('run_get_properties', builderState);
+        }
     };
     PresentationWindow.prototype.isEmbeddedApp = function () {
         var _a = this.options, applicationVersion = _a.applicationVersion, isPreview = _a.isPreview;
@@ -517,9 +540,9 @@ var PresentationWindow = /** @class */ (function () {
                         if (!applicationVersion.embeddedUrlFormat) {
                             throw new Error("Error loading embedded app, missing embeddedUrlFormat for '" + applicationVersion.id + "'");
                         }
-                        url = embeddedApps_1.default(this.presentation, applicationVersion);
+                        url = this.getEmbeddedAppUrl();
                         this.logInfo("Create window '" + windowId + "' for embedded app url '" + url + "'");
-                        return [4 /*yield*/, this.createAndLoadWindow(this.appendWindowIdToHash(url, windowId), 
+                        return [4 /*yield*/, this.createAndLoadWindow(url, 
                             // Embedded apps should not have a backgroundColor because some sites expect
                             // the browser default of white will be applied.
                             '#ffffff', this.handleEmbeddedMessage)];
@@ -762,6 +785,9 @@ var PresentationWindow = /** @class */ (function () {
                             windowManager.on('window_end_error', function (metadata) {
                                 parentWindowManager.emit('window_end_error', metadata);
                             });
+                            windowManager.on('window_analytics_event', function (metadata) {
+                                parentWindowManager.emit('window_analytics_event', metadata);
+                            });
                         }
                         this.windowManagers[windowName] = windowManager;
                         windowManager.setRenderer(renderer);
@@ -827,6 +853,14 @@ var PresentationWindow = /** @class */ (function () {
             this.disableInterruptLockCallback();
         }
     };
+    PresentationWindow.prototype.getEmbeddedAppUrl = function () {
+        var windowId = this.options.windowId;
+        var metadata = {
+            renderMode: this.options.isPreview ? 'preview' : 'live'
+        };
+        var url = embeddedApps_1.default(this.presentation, this.options.applicationVersion, metadata);
+        return this.appendWindowIdToHash(url, windowId);
+    };
     PresentationWindow.prototype.handleReady = function () {
         this.didReceiveReady = true;
         this.checkIsReadyCallback();

package/build/embeddedApps.d.ts

@@ -1,2 +1,2 @@
-import { Presentation, ApplicationVersion } from './types';
-export default function createEmbeddedApp(presentation: Presentation, applicationVersion: ApplicationVersion): string;
+import { Presentation, ApplicationVersion, EmbeddedAppMetadata } from './types';
+export default function createEmbeddedApp(presentation: Presentation, applicationVersion: ApplicationVersion, metadata: EmbeddedAppMetadata): string;

package/build/embeddedApps.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function createEmbeddedApp(presentation, applicationVersion) {
+function createEmbeddedApp(presentation, applicationVersion, metadata) {
     // build matches
-    var parameterRegex = /(:([\w-]+))(.?$|[^\w-])/gm;
+    var parameterRegex = /(:([\w-\$]+))(.?$|[^\w-\$])/gm;
     var matches = [];
     var match = null;
     do {
@@ -17,19 +17,30 @@ function createEmbeddedApp(presentation, applicationVersion) {
         var queryParamVariableName = m[1]; // Where the value of your input will be injected. E.g. ":location"
         var queryParamName = m[2]; // The query param name. E.g. "location"
         var _a = queryParamVariableName.split(':'), variableName = _a[1];
-        // Don't replace variables that are numbers to allow setting
-        // port numbers in the embedded app url.
-        if (!isNaN(Number(variableName)))
-            return;
-        var presentationProperty = applicationVersion.presentationProperties.find(function (p) { return p.name === variableName; });
-        // If the presentation property is not found (this shouldn't happen), default to encoding the value.
-        // Otherwise, only skip encoding if the presentation property's encode property is false.
-        var shouldEncodeValue = !presentationProperty || presentationProperty.encode !== false;
-        var value = presentation.applicationVariables[queryParamName];
-        if (value === undefined)
-            value = '';
-        if (Array.isArray(value)) {
-            value = JSON.stringify(value);
+        var shouldEncodeValue = true;
+        var value = '';
+        if (variableName.charAt(0) === '$') {
+            var metadataKey = variableName.slice(1);
+            if (metadataKey === 'renderMode') {
+                value = metadata.renderMode;
+            }
+        }
+        else {
+            // Don't replace variables that are numbers to allow setting
+            // port numbers in the embedded app url.
+            if (!isNaN(Number(variableName)))
+                return;
+            var presentationProperty = applicationVersion.presentationProperties.find(function (p) { return p.name === variableName; });
+            // If the presentation property is not found (this shouldn't happen), default to encoding the value.
+            // Otherwise, only skip encoding if the presentation property's encode property is false.
+            shouldEncodeValue =
+                !presentationProperty || presentationProperty.encode !== false;
+            value = presentation.applicationVariables[queryParamName];
+            if (value === undefined)
+                value = '';
+            if (Array.isArray(value)) {
+                value = JSON.stringify(value);
+            }
         }
         if (shouldEncodeValue) {
             value = encodeURIComponent(value);

package/build/embeddedApps.test.js

@@ -15,50 +15,60 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var embeddedApps_1 = __importDefault(require("./embeddedApps"));
-var createPresentation = function (overrides) { return (__assign({ id: 'id', name: 'name', applicationDeploymentId: 'applicationDeploymentId', themeId: null, applicationVariables: {}, duration: 0, r: {
-        resource: {
-            updatedAt: '',
-            createdAt: ''
-        },
-        presentationsPlaylists: []
-    } }, overrides)); };
-var createApplicationVersion = function (overrides) { return (__assign({ id: 'id', name: 'name', applicationId: 'applicationId', embeddedUrlFormat: null, configurableDuration: false, sourceUrl: null, presentationProperties: [] }, overrides)); };
+var createPresentation = function (overrides) {
+    if (overrides === void 0) { overrides = {}; }
+    return (__assign({ id: 'id', name: 'name', applicationDeploymentId: 'applicationDeploymentId', themeId: null, applicationVariables: {}, duration: 0, r: {
+            resource: {
+                updatedAt: '',
+                createdAt: ''
+            },
+            presentationsPlaylists: []
+        } }, overrides));
+};
+var createApplicationVersion = function (overrides) {
+    if (overrides === void 0) { overrides = {}; }
+    return (__assign({ id: 'id', name: 'name', applicationId: 'applicationId', embeddedUrlFormat: null, configurableDuration: false, sourceUrl: null, presentationProperties: [] }, overrides));
+};
+var createMetadata = function (overrides) {
+    if (overrides === void 0) { overrides = {}; }
+    return (__assign({ renderMode: 'live' }, overrides));
+};
 test('Replaces variable in query parameteers', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo: 'bar' } }), createApplicationVersion({
         embeddedUrlFormat: 'https://example.com?foo=:foo'
-    }))).toBe('https://example.com?foo=bar');
+    }), createMetadata())).toBe('https://example.com?foo=bar');
 });
 test('Replaces variable in path', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo: 'bar' } }), createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo'
-    }))).toBe('https://example.com/bar');
+    }), createMetadata())).toBe('https://example.com/bar');
 });
 test('Replaces undefined variable with empty string', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: {} }), createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo'
-    }))).toBe('https://example.com/');
+    }), createMetadata())).toBe('https://example.com/');
 });
 test('Replaces variable with underscore', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo_1: 'bar' } }), createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo_1'
-    }))).toBe('https://example.com/bar');
+    }), createMetadata())).toBe('https://example.com/bar');
 });
 test('Replaces variable with hyphen', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { 'foo-1': 'bar' } }), createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo-1'
-    }))).toBe('https://example.com/bar');
+    }), createMetadata())).toBe('https://example.com/bar');
 });
 test('Does not replace variable that is a number', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo: 'bar' } }), createApplicationVersion({
         embeddedUrlFormat: 'http://localhost:8080?foo=:foo'
-    }))).toBe('http://localhost:8080?foo=bar');
+    }), createMetadata())).toBe('http://localhost:8080?foo=bar');
 });
 test('Encodes a variables containing special characters', function () {
     var fooValue = 'Lorem Ipsum. !@#$%^&*()-. More Text';
     var fooValueEncoded = 'Lorem%20Ipsum.%20!%40%23%24%25%5E%26*()-.%20More%20Text';
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo: fooValue } }), createApplicationVersion({
         embeddedUrlFormat: "http://localhost:8080?foo=:foo"
-    }))).toBe("http://localhost:8080?foo=" + fooValueEncoded);
+    }), createMetadata())).toBe("http://localhost:8080?foo=" + fooValueEncoded);
 });
 test('Does not encode value if presentation property disables encoding', function () {
     expect(embeddedApps_1.default(createPresentation({
@@ -66,12 +76,38 @@ test('Does not encode value if presentation property disables encoding', functio
     }), createApplicationVersion({
         embeddedUrlFormat: ":url",
         presentationProperties: [{ name: 'url', encode: false }]
-    }))).toBe("https://raydiant.com");
+    }), createMetadata())).toBe("https://raydiant.com");
 });
 test('Encodes a variables containing an array', function () {
     var fooValue = ['option-a', 'option-b', 'option-c'];
     var fooValueEncoded = '%5B%22option-a%22%2C%22option-b%22%2C%22option-c%22%5D';
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo: fooValue } }), createApplicationVersion({
         embeddedUrlFormat: "http://localhost:8080?foo=:foo"
-    }))).toBe("http://localhost:8080?foo=" + fooValueEncoded);
+    }), createMetadata())).toBe("http://localhost:8080?foo=" + fooValueEncoded);
+});
+test('Replaces $renderMode with metadata', function () {
+    var presentation = createPresentation();
+    var applicationVersion = createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com?renderMode=:$renderMode'
+    });
+    expect(embeddedApps_1.default(presentation, applicationVersion, createMetadata({ renderMode: 'preview' }))).toBe('https://example.com?renderMode=preview');
+    expect(embeddedApps_1.default(presentation, applicationVersion, createMetadata({ renderMode: 'live' }))).toBe('https://example.com?renderMode=live');
+});
+test('Replaces undefined metadata with empty string', function () {
+    var presentation = createPresentation();
+    var applicationVersion = createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com?invalid=:$invalid'
+    });
+    expect(embeddedApps_1.default(presentation, applicationVersion, createMetadata())).toBe('https://example.com?invalid=');
+});
+test('Replace protocol, ip and port', function () {
+    expect(embeddedApps_1.default(createPresentation({
+        applicationVariables: {
+            protocol: 'http',
+            ip: '192.168.1.0',
+            port: 3000
+        }
+    }), createApplicationVersion({
+        embeddedUrlFormat: ":protocol://:ip::port"
+    }), createMetadata())).toBe("http://192.168.1.0:3000");
 });

package/build/types.d.ts

@@ -127,3 +127,11 @@ export interface InputState {
     path: Path;
     state: any;
 }
+export interface EmbeddedAppMetadata {
+    renderMode: 'preview' | 'live';
+}
+export interface AnalyticsEvent {
+    type: string;
+    source: string;
+    productCategory?: string | null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raydiant/playlist-window-manager",
-  "version": "0.18.0",
+  "version": "0.20.0-rc.1",
   "description": "Window manager for playlist playback.",
   "main": "build/index.js",
   "scripts": {

package/src/PlaylistWindowManager.ts

@@ -7,7 +7,8 @@ import {
   WindowBounds,
   Theme,
   Logger,
-  WorkerState
+  WorkerState,
+  AnalyticsEvent
 } from './types';
 import PresentationWindow from './PresentationWindow';
 import PlaylistWindowManagerState from './PlaylistWindowManagerState';
@@ -521,6 +522,8 @@ export default class PlaylistWindowManager extends EventEmitter {
     this.currentWindow.onError(this.handleCurrentPresentationError);
     this.currentWindow.onEnableInterruptLock(this.handleEnableInterruptLock);
     this.currentWindow.onDisableInterruptLock(this.handleDisableInterruptLock);
+    this.currentWindow.onAnalyticsEvent(this.handleAnalyticsEvent);
+
     await this.currentWindow.load();
   }
 
@@ -691,6 +694,7 @@ export default class PlaylistWindowManager extends EventEmitter {
       this.currentWindow.onDisableInterruptLock(
         this.handleDisableInterruptLock
       );
+      this.currentWindow.onAnalyticsEvent(this.handleAnalyticsEvent);
     }
 
     // Play new current window.
@@ -754,6 +758,12 @@ export default class PlaylistWindowManager extends EventEmitter {
     }
   };
 
+  private handleAnalyticsEvent = (event: AnalyticsEvent) => {
+    // Emit the event on the current window. Only the current window should
+    // send analytics events since the next window is not visible.
+    this.emitCurrentWindowEvent('window_analytics_event', event);
+  };
+
   private handleCurrentPresentationComplete = async () => {
     const { logger } = this.options;
 

package/src/PresentationWindow.ts

@@ -15,7 +15,9 @@ import {
   Logger,
   OpenChildWindowOptions,
   BuilderState,
-  WorkerState
+  WorkerState,
+  EmbeddedAppMetadata,
+  AnalyticsEvent
 } from './types';
 
 export interface PresentationWindowOptions {
@@ -56,6 +58,15 @@ const defaultAppRendererUrl = 'https://apps.raydiant.com/3.0.0/index.html';
 const isValidNumber = (value: any) =>
   typeof value === 'number' && !isNaN(value);
 
+const isValidAnalyticsEvent = (value: any): value is AnalyticsEvent =>
+  value &&
+  typeof value === 'object' &&
+  typeof value.type === 'string' &&
+  typeof value.source === 'string' &&
+  (typeof value.productCategory === 'string' ||
+    value.productCategory === undefined ||
+    value.productCategory === null);
+
 export default class PresentationWindow {
   private didReceiveReady: boolean = false;
   private readyCallback: (() => void) | null = null;
@@ -75,6 +86,9 @@ export default class PresentationWindow {
   private isChildWindowLocked: { [windowId: string]: boolean } = {};
   private enableInterruptLockCallback: (() => void) | null = null;
   private disableInterruptLockCallback: (() => void) | null = null;
+  private analyticsEventCallback:
+    | ((event: AnalyticsEvent) => void)
+    | null = null;
 
   private builderState: BuilderState | undefined;
   private presentation: Presentation;
@@ -263,6 +277,10 @@ export default class PresentationWindow {
     this.disableInterruptLockCallback = callback;
   }
 
+  public onAnalyticsEvent(callback: ((event: AnalyticsEvent) => void) | null) {
+    this.analyticsEventCallback = callback;
+  }
+
   public isReady() {
     // TODO: To support the 'ready' event in embedded apps, they will need to tell the
     // runtime that it should wait for ready instead of DOMLoaded. This could be a "wait
@@ -324,7 +342,7 @@ export default class PresentationWindow {
 
     if (this.isEmbeddedApp()) {
       if (applicationVersion.embeddedUrlFormat) {
-        const url = createEmbeddedApp(this.presentation, applicationVersion);
+        const url = this.getEmbeddedAppUrl();
 
         this.logInfo(
           `Reload window '${windowId}' for embedded app url '${url}'`
@@ -338,7 +356,11 @@ export default class PresentationWindow {
   }
 
   public runGetProperties(builderState?: BuilderState) {
-    this.sendMessage('run_get_properties', builderState);
+    // Do no support conditional properties for embedded apps. We will likely
+    // change the way conditional properties work.
+    if (!this.isEmbeddedApp()) {
+      this.sendMessage('run_get_properties', builderState);
+    }
   }
 
   private isEmbeddedApp() {
@@ -399,11 +421,11 @@ export default class PresentationWindow {
       );
     }
 
-    const url = createEmbeddedApp(this.presentation, applicationVersion);
+    const url = this.getEmbeddedAppUrl();
     this.logInfo(`Create window '${windowId}' for embedded app url '${url}'`);
 
     await this.createAndLoadWindow(
-      this.appendWindowIdToHash(url, windowId),
+      url,
       // Embedded apps should not have a backgroundColor because some sites expect
       // the browser default of white will be applied.
       '#ffffff',
@@ -666,6 +688,9 @@ export default class PresentationWindow {
         windowManager.on('window_end_error', metadata => {
           parentWindowManager.emit('window_end_error', metadata);
         });
+        windowManager.on('window_analytics_event', metadata => {
+          parentWindowManager.emit('window_analytics_event', metadata);
+        });
       }
 
       this.windowManagers[windowName] = windowManager;
@@ -735,6 +760,22 @@ export default class PresentationWindow {
     }
   }
 
+  private getEmbeddedAppUrl() {
+    const { windowId } = this.options;
+
+    const metadata: EmbeddedAppMetadata = {
+      renderMode: this.options.isPreview ? 'preview' : 'live'
+    };
+
+    const url = createEmbeddedApp(
+      this.presentation,
+      this.options.applicationVersion,
+      metadata
+    );
+
+    return this.appendWindowIdToHash(url, windowId);
+  }
+
   private handleEmbeddedMessage = async (type: string, payload?: any) => {
     const { windowId } = this.options;
 
@@ -833,6 +874,13 @@ export default class PresentationWindow {
         break;
       }
 
+      case 'analytics-event': {
+        if (this.analyticsEventCallback && isValidAnalyticsEvent(payload)) {
+          this.analyticsEventCallback(payload);
+        }
+        break;
+      }
+
       default: {
         this.logWarning(`Received unknown embedded message type: ${type}`);
       }

package/src/embeddedApps.test.ts

@@ -1,8 +1,8 @@
 import createEmbeddedApp from './embeddedApps';
-import { Presentation, ApplicationVersion } from './types';
+import { Presentation, ApplicationVersion, EmbeddedAppMetadata } from './types';
 
 const createPresentation = (
-  overrides: Partial<Presentation>
+  overrides: Partial<Presentation> = {}
 ): Presentation => ({
   id: 'id',
   name: 'name',
@@ -21,7 +21,7 @@ const createPresentation = (
 });
 
 const createApplicationVersion = (
-  overrides: Partial<ApplicationVersion>
+  overrides: Partial<ApplicationVersion> = {}
 ): ApplicationVersion => ({
   id: 'id',
   name: 'name',
@@ -33,13 +33,21 @@ const createApplicationVersion = (
   ...overrides
 });
 
+const createMetadata = (
+  overrides: Partial<EmbeddedAppMetadata> = {}
+): EmbeddedAppMetadata => ({
+  renderMode: 'live',
+  ...overrides
+});
+
 test('Replaces variable in query parameteers', () => {
   expect(
     createEmbeddedApp(
       createPresentation({ applicationVariables: { foo: 'bar' } }),
       createApplicationVersion({
         embeddedUrlFormat: 'https://example.com?foo=:foo'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('https://example.com?foo=bar');
 });
@@ -50,7 +58,8 @@ test('Replaces variable in path', () => {
       createPresentation({ applicationVariables: { foo: 'bar' } }),
       createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('https://example.com/bar');
 });
@@ -61,7 +70,8 @@ test('Replaces undefined variable with empty string', () => {
       createPresentation({ applicationVariables: {} }),
       createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('https://example.com/');
 });
@@ -72,7 +82,8 @@ test('Replaces variable with underscore', () => {
       createPresentation({ applicationVariables: { foo_1: 'bar' } }),
       createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo_1'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('https://example.com/bar');
 });
@@ -83,7 +94,8 @@ test('Replaces variable with hyphen', () => {
       createPresentation({ applicationVariables: { 'foo-1': 'bar' } }),
       createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo-1'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('https://example.com/bar');
 });
@@ -94,7 +106,8 @@ test('Does not replace variable that is a number', () => {
       createPresentation({ applicationVariables: { foo: 'bar' } }),
       createApplicationVersion({
         embeddedUrlFormat: 'http://localhost:8080?foo=:foo'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('http://localhost:8080?foo=bar');
 });
@@ -109,7 +122,8 @@ test('Encodes a variables containing special characters', () => {
       createPresentation({ applicationVariables: { foo: fooValue } }),
       createApplicationVersion({
         embeddedUrlFormat: `http://localhost:8080?foo=:foo`
-      })
+      }),
+      createMetadata()
     )
   ).toBe(`http://localhost:8080?foo=${fooValueEncoded}`);
 });
@@ -123,7 +137,8 @@ test('Does not encode value if presentation property disables encoding', () => {
       createApplicationVersion({
         embeddedUrlFormat: `:url`,
         presentationProperties: [{ name: 'url', encode: false }]
-      })
+      }),
+      createMetadata()
     )
   ).toBe(`https://raydiant.com`);
 });
@@ -138,7 +153,60 @@ test('Encodes a variables containing an array', () => {
       createPresentation({ applicationVariables: { foo: fooValue } }),
       createApplicationVersion({
         embeddedUrlFormat: `http://localhost:8080?foo=:foo`
-      })
+      }),
+      createMetadata()
     )
   ).toBe(`http://localhost:8080?foo=${fooValueEncoded}`);
 });
+
+test('Replaces $renderMode with metadata', () => {
+  const presentation = createPresentation();
+  const applicationVersion = createApplicationVersion({
+    embeddedUrlFormat: 'https://example.com?renderMode=:$renderMode'
+  });
+
+  expect(
+    createEmbeddedApp(
+      presentation,
+      applicationVersion,
+      createMetadata({ renderMode: 'preview' })
+    )
+  ).toBe('https://example.com?renderMode=preview');
+
+  expect(
+    createEmbeddedApp(
+      presentation,
+      applicationVersion,
+      createMetadata({ renderMode: 'live' })
+    )
+  ).toBe('https://example.com?renderMode=live');
+});
+
+test('Replaces undefined metadata with empty string', () => {
+  const presentation = createPresentation();
+  const applicationVersion = createApplicationVersion({
+    embeddedUrlFormat: 'https://example.com?invalid=:$invalid'
+  });
+
+  expect(
+    createEmbeddedApp(presentation, applicationVersion, createMetadata())
+  ).toBe('https://example.com?invalid=');
+});
+
+test('Replace protocol, ip and port', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({
+        applicationVariables: {
+          protocol: 'http',
+          ip: '192.168.1.0',
+          port: 3000
+        }
+      }),
+      createApplicationVersion({
+        embeddedUrlFormat: `:protocol://:ip::port`
+      }),
+      createMetadata()
+    )
+  ).toBe(`http://192.168.1.0:3000`);
+});

package/src/embeddedApps.ts

@@ -1,11 +1,12 @@
-import { Presentation, ApplicationVersion } from './types';
+import { Presentation, ApplicationVersion, EmbeddedAppMetadata } from './types';
 
 export default function createEmbeddedApp(
   presentation: Presentation,
-  applicationVersion: ApplicationVersion
+  applicationVersion: ApplicationVersion,
+  metadata: EmbeddedAppMetadata
 ) {
   // build matches
-  const parameterRegex = /(:([\w-]+))(.?$|[^\w-])/gm;
+  const parameterRegex = /(:([\w-\$]+))(.?$|[^\w-\$])/gm;
   const matches = [];
   let match = null;
   do {
@@ -23,24 +24,36 @@ export default function createEmbeddedApp(
     const queryParamName = m[2]; // The query param name. E.g. "location"
 
     const [, variableName] = queryParamVariableName.split(':');
-    // Don't replace variables that are numbers to allow setting
-    // port numbers in the embedded app url.
-    if (!isNaN(Number(variableName))) return;
-
-    const presentationProperty = applicationVersion.presentationProperties.find(
-      p => p.name === variableName
-    );
-
-    // If the presentation property is not found (this shouldn't happen), default to encoding the value.
-    // Otherwise, only skip encoding if the presentation property's encode property is false.
-    const shouldEncodeValue =
-      !presentationProperty || presentationProperty.encode !== false;
-
-    let value = presentation.applicationVariables[queryParamName];
-    if (value === undefined) value = '';
-    if (Array.isArray(value)) {
-      value = JSON.stringify(value);
+
+    let shouldEncodeValue = true;
+    let value: any = '';
+
+    if (variableName.charAt(0) === '$') {
+      const metadataKey = variableName.slice(1);
+      if (metadataKey === 'renderMode') {
+        value = metadata.renderMode;
+      }
+    } else {
+      // Don't replace variables that are numbers to allow setting
+      // port numbers in the embedded app url.
+      if (!isNaN(Number(variableName))) return;
+
+      const presentationProperty = applicationVersion.presentationProperties.find(
+        p => p.name === variableName
+      );
+
+      // If the presentation property is not found (this shouldn't happen), default to encoding the value.
+      // Otherwise, only skip encoding if the presentation property's encode property is false.
+      shouldEncodeValue =
+        !presentationProperty || presentationProperty.encode !== false;
+
+      value = presentation.applicationVariables[queryParamName];
+      if (value === undefined) value = '';
+      if (Array.isArray(value)) {
+        value = JSON.stringify(value);
+      }
     }
+
     if (shouldEncodeValue) {
       value = encodeURIComponent(value);
     }

package/src/types.ts

@@ -152,3 +152,13 @@ export interface InputState {
   path: Path;
   state: any;
 }
+
+export interface EmbeddedAppMetadata {
+  renderMode: 'preview' | 'live';
+}
+
+export interface AnalyticsEvent {
+  type: string;
+  source: string;
+  productCategory?: string | null;
+}