@uptick-ads/react-native-web-sdk 0.2.7 → 0.2.8

package/README.md

@@ -50,7 +50,7 @@ Because both presentations work from the same mount point, Uptick can switch a p
 | `callback` | | `(event, data)`, the same events as the web SDK callback |
 | `openUrl` | `Linking.openURL` | How accepted offers open; supply your own to use an in-app browser |
 | `style` | | Style for the inline slot |
-| `modal` | | Presentation options for the popup. Any option set here is reported to Uptick with the flow so performance can be read against it. |
+| `modal` | | Presentation options for the popup. Any option set here is reported to Uptick with the flow as a `custom` parameter so performance can be read against it. |
 | `webViewProps` | | Extra props passed through to `WebView` |
 | `host` | `api.uptick.com` | API host, only for testing against other environments |
 

package/index.d.ts

@@ -42,8 +42,8 @@ export interface UptickFlowProps extends UptickFlowParams {
 export function UptickFlow(props: UptickFlowProps): JSX.Element;
 
 export const version: string;
-export function integrationVersion(sdkVersion: string, modal?: UptickModalOptions): string;
+export function customizations(modal?: UptickModalOptions): string[];
 export const FLOW_PARAMS: ReadonlyArray<keyof UptickFlowParams>;
 export function pickFlowParams(props: Record<string, unknown>): UptickFlowParams;
-export function buildEmbedUrl(options: { host: string; integrationId: string; placement?: string; params?: UptickFlowParams }): string;
+export function buildEmbedUrl(options: { host: string; integrationId: string; placement?: string; params?: UptickFlowParams; version?: string; custom?: string[] }): string;
 export function embedPath(host: string, integrationId: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptick-ads/react-native-web-sdk",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "React Native component that runs the Uptick web SDK inside a WebView, inline or as a popup, with the web integration's parameters",
   "keywords": [
     "uptick",

package/src/UptickFlow.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Linking, Modal, Pressable, StyleSheet, View } from "react-native";
 import { WebView } from "react-native-webview";
-import { buildEmbedUrl, embedPath, integrationVersion, pickFlowParams } from "./embedUrl";
+import { buildEmbedUrl, customizations, embedPath, pickFlowParams } from "./embedUrl";
 import { version as SDK_VERSION } from "./version";
 
 const DEFAULT_HOST = "api.uptick.com";
@@ -34,12 +34,13 @@ export function UptickFlow({
 
   const params = pickFlowParams(flowProps);
   const paramsKey = JSON.stringify(params);
-  const version = integrationVersion(SDK_VERSION, modal);
+  const custom = customizations(modal);
+  const customKey = custom.join(",");
   const source = useMemo(
-    () => ({ uri: buildEmbedUrl({ host, integrationId, placement, params, version }) }),
+    () => ({ uri: buildEmbedUrl({ host, integrationId, placement, params, version: SDK_VERSION, custom }) }),
     // Callers pass fresh prop values each render; key on the serialised params so the page does not reload on every parent render.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [host, integrationId, placement, paramsKey, version]
+    [host, integrationId, placement, paramsKey, customKey]
   );
   const ownPath = embedPath(host, integrationId);
 

package/src/embedUrl.js

@@ -41,7 +41,7 @@ export function embedPath(host, integrationId) {
   return `https://${host}/v1/places/${encodeURIComponent(integrationId)}/embed`;
 }
 
-// Names of the presentation options a host customised, so reporting can tell a stock integration from a tuned one when performance differs.
+// Names of the presentation options a host customised. They travel as a flow parameter, so every event stores them in its data like any other extra parameter, and reporting can tell a stock integration from a tuned one when performance differs.
 export function customizations(modal) {
   if (!modal) return [];
   const names = [];
@@ -52,16 +52,10 @@ export function customizations(modal) {
   return names;
 }
 
-// The integration version the API records on every event; a `+custom.` suffix lists any presentation options the host changed.
-export function integrationVersion(sdkVersion, modal) {
-  const names = customizations(modal);
-  return names.length ? `${sdkVersion}+custom.${names.join(",")}` : sdkVersion;
-}
-
-export function buildEmbedUrl({ host, integrationId, placement, params, version }) {
+export function buildEmbedUrl({ host, integrationId, placement, params, version, custom }) {
   if (!integrationId) throw new Error("UptickFlow: integrationId is required");
   // The page renders whatever presentation the placement's template defines; `native` only asks it to leave the popup chrome to the app.
   const search = encodeQuery({ placement, variant: "native", integration_version: version });
-  const fragment = encodeQuery(params || {});
+  const fragment = encodeQuery({ ...(params || {}), custom: custom && custom.length ? custom.join(",") : undefined });
   return `${embedPath(host, integrationId)}?${search}${fragment ? `#${fragment}` : ""}`;
 }

package/src/index.js

@@ -1,3 +1,3 @@
 export { UptickFlow } from "./UptickFlow";
-export { buildEmbedUrl, embedPath, pickFlowParams, integrationVersion, FLOW_PARAMS } from "./embedUrl";
+export { buildEmbedUrl, embedPath, pickFlowParams, customizations, FLOW_PARAMS } from "./embedUrl";
 export { version } from "./version";

package/src/version.js

@@ -1,2 +1,2 @@
 // Kept in step with package.json by the release pipeline; the API records it on every event as integration_version.
-export const version = "0.2.7";
+export const version = "0.2.8";