@ninetailed/experience.js-react 2.0.0-beta.35 → 2.0.0-beta.39

package/index.esm.js

@@ -1,5 +1,5 @@
 import React, { createContext, useMemo, useContext, useState, useEffect, useCallback } from 'react';
-import { Ninetailed, selectVariant, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant } from '@ninetailed/experience.js';
+import { Ninetailed, selectVariant, selectDistribution, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant } from '@ninetailed/experience.js';
 import { useInView } from 'react-intersection-observer';
 import { isBrowser } from '@ninetailed/experience.js-shared';
 import get$1 from 'lodash/get';
@@ -2337,7 +2337,8 @@ const MergeTag = ({
 const TrackExperience = ({
   children,
   experience,
-  variant
+  variant,
+  profile
 }) => {
   const ninetailed = useNinetailed();
   const {
@@ -2348,9 +2349,14 @@ const TrackExperience = ({
   });
   useEffect(() => {
     if (isBrowser() && inView) {
+      const distribution = selectDistribution({
+        experience,
+        profile
+      });
       ninetailed.trackExperience({
         experience,
-        variant
+        component: variant,
+        variant: distribution.index
       });
     }
   }, [inView]);
@@ -2616,7 +2622,7 @@ const Experience = _a => {
     })));
   }
 
-  if (!experience || !variant) {
+  if (!experience) {
     return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
       key: baseline.id,
       ninetailed: {
@@ -2628,18 +2634,34 @@ const Experience = _a => {
     }));
   }
 
+  if (!variant) {
+    return /*#__PURE__*/React.createElement(TrackExperience, {
+      experience: experience,
+      variant: baseline,
+      // the profile is definitely defined, otherwise there wouldn't be an experience selected
+      profile: profile
+    }, /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+      key: baseline.id,
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+        }
+      }
+    })));
+  }
+
   return /*#__PURE__*/React.createElement(TrackExperience, {
     experience: experience,
-    variant: {
-      id: variant.id,
-      hidden: variant.hidden || false
-    }
+    variant: variant,
+    // the profile is definitely defined, otherwise there wouldn't be an experience selected
+    profile: profile
   }, (variant === null || variant === void 0 ? void 0 : variant.hidden) ? null : /*#__PURE__*/React.createElement(Component, Object.assign({}, variant, {
     key: `${experience.id}-${variant.id}`,
     ninetailed: {
       isPersonalized,
       audience: {
-        id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'baseline'
+        id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
       }
     }
   })));

package/index.umd.js

@@ -1887,7 +1887,8 @@
   var TrackExperience = function TrackExperience(_a) {
     var children = _a.children,
         experience = _a.experience,
-        variant = _a.variant;
+        variant = _a.variant,
+        profile = _a.profile;
     var ninetailed = useNinetailed();
 
     var _b = reactIntersectionObserver.useInView({
@@ -1898,9 +1899,14 @@
 
     React.useEffect(function () {
       if (experience_jsShared.isBrowser() && inView) {
+        var distribution = experience_js.selectDistribution({
+          experience: experience,
+          profile: profile
+        });
         ninetailed.trackExperience({
           experience: experience,
-          variant: variant
+          component: variant,
+          variant: distribution.index
         });
       }
     }, [inView]);
@@ -2161,7 +2167,7 @@
       })));
     }
 
-    if (!experience || !variant) {
+    if (!experience) {
       return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
         key: baseline.id,
         ninetailed: {
@@ -2173,18 +2179,34 @@
       }));
     }
 
+    if (!variant) {
+      return /*#__PURE__*/React__default["default"].createElement(TrackExperience, {
+        experience: experience,
+        variant: baseline,
+        // the profile is definitely defined, otherwise there wouldn't be an experience selected
+        profile: profile
+      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+        key: baseline.id,
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+          }
+        }
+      })));
+    }
+
     return /*#__PURE__*/React__default["default"].createElement(TrackExperience, {
       experience: experience,
-      variant: {
-        id: variant.id,
-        hidden: variant.hidden || false
-      }
+      variant: variant,
+      // the profile is definitely defined, otherwise there wouldn't be an experience selected
+      profile: profile
     }, (variant === null || variant === void 0 ? void 0 : variant.hidden) ? null : /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant, {
       key: "".concat(experience.id, "-").concat(variant.id),
       ninetailed: {
         isPersonalized: isPersonalized,
         audience: {
-          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'baseline'
+          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
         }
       }
     })));

package/lib/Experience/TrackExperience.d.ts

@@ -1,3 +1,12 @@
 import React from 'react';
-import { TrackExperiencePayload } from '@ninetailed/experience.js';
-export declare const TrackExperience: React.FC<React.PropsWithChildren<TrackExperiencePayload>>;
+import { Profile } from '@ninetailed/experience.js-shared';
+import { ExperienceConfiguration } from '@ninetailed/experience.js';
+declare type TrackExperienceProps = {
+    experience: ExperienceConfiguration;
+    variant: {
+        id: string;
+    };
+    profile: Profile;
+};
+export declare const TrackExperience: React.FC<React.PropsWithChildren<TrackExperienceProps>>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "2.0.0-beta.35",
+  "version": "2.0.0-beta.39",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
@@ -8,9 +8,9 @@
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
     "lodash": "^4.17.21",
-    "@ninetailed/experience.js": "2.0.0-beta.35",
+    "@ninetailed/experience.js": "2.0.0-beta.39",
     "analytics": "^0.8.0",
-    "@ninetailed/experience.js-shared": "2.0.0-beta.35",
+    "@ninetailed/experience.js-shared": "2.0.0-beta.39",
     "uuid": "^8.3.2",
     "ts-toolbelt": "^9.6.0",
     "locale-enum": "^1.1.1",