@ninetailed/experience.js-gatsby 1.7.0-beta.0

package/README.md

@@ -0,0 +1,166 @@
+# @ninetailed/experience.js-gatsby
+
+Add dynamic content personalization to Gatbsy without performance trade-offs or complex integrations.
+
+`@ninetailed/experience.js-gatsby` is a React component specially designed to work seamlessly with
+Gatsby and Ninetailed.
+
+**[Demo](https://demo.ninetailed.io/saas)**
+
+## Table of Contents
+
+- [Ninetailed Platform](#ninetailed-platform)
+- [Install](#install)
+  - [Gatsby](#gatsby)
+  - [Gatsby and Contentful](#gatsby-and-contentful)
+- [How to use](#how-to-use)
+- [Personalizing Components](#personalizing-components)
+  - [Personalize Component](#personalize-component)
+  - [Inline Personalization](#inline-personalization)
+- [Contentful Richtext](#contentful-richtext)
+- [Additional Documentation](#additional-documentation)
+
+## Ninetailed Platform
+
+Ninetailed is an api-first optimization platform designed for the modern web. It is a headless personalization solution for frameworks like React or Gatsby JS and headless CMS like Contentful. The **[Ninetailed](https://ninetailed.io/)** platform includes:
+
+- Real-time personalization API and customer data hub (CDP).
+- Plugins and SDKs for easy integration with major frameworks like Gatsby.
+- CMS integrations to enable content creators easily create personalized content and define audiences.
+- Integration with analytics tools like Google Analytics and Mixpanel.
+- Optional edge side rendering for maximum web performance.
+
+## Install
+
+### Gatsby
+
+`npm install @ninetailed/experience.js-gatsby`
+
+Install the `@ninetailed/experience.js-gatsby` modules via npm or yarn.
+
+**Install module via npm**
+
+```shell
+npm install @ninetailed/experience.js-gatsby
+```
+
+**Install module via yarn**
+
+```shell
+yarn add @ninetailed/experience.js-gatsby
+```
+
+## How to use
+
+Add the plugin to the plugins array in your gatsby-config.js and your API Key.
+
+```js
+plugins: [
+    ...your other gatsby plugins
+    {
+        resolve: `gatsby-plugin-ninetailed`,
+        options: {
+            clientId: 'your api key'
+        }
+    }
+]
+```
+
+> Your API Key can be found in the Contentful app configuration.
+
+By using the gatsby plugin there's no need to configure the `NinetailedProvuder` as described in the React tutorial, as this is done by the plugin.
+
+The plugin automatically tracks Pageviews on route change, please do not track it on your own as you would duplicate events.
+
+## Personalizing Components
+
+### Personalize Component
+
+To make personalizing your components as seamless as possible Ninetailed provides a `<Personalize />` component which wraps the component you'd like to personalize. It automatically detects the properties needed from the wrapped component and also applies a `variants` property.
+
+```TypeScript
+import React from 'react';
+import { Personalize } from '@ninetailed/experience.js-gatsby';
+
+type HeadlineProps = {
+  text: string;
+}
+
+const Headline: React.FC<HeadlineProps> = ({ text }) => {
+  return <h1>{text}</h1>
+};
+
+export const Page = () => {
+  // These variants normally come from your CMS
+  // You can use our Contentful App for this
+  const variants = [
+    {
+      text: "We build super nice websites for enterprise companies!",
+      audience: "enterprise-audience-id" // variants have a audience id
+    }
+  ]
+
+  return (<Personalize
+    component={Headline}
+    variants={variants}
+    text="We build websites for everbody" // this is the baseline for user which are not in a audience.
+  />);
+};
+```
+
+### Inline Personalization
+
+Using the visitor's and the useProfile hook makes it very easy to use inline personalization. For advanced cases like contentful Richtext we also provide a SDK - simply have a look at the gatsby section.
+
+```TypeScript
+import React, { useState, useEffect } from 'react';
+import { useProfile } from '@ninetailed/experience.js-gatsby';
+
+const Greeting = () => {
+  const [loading, profile, error] = useProfile();
+
+  if (loading) {
+    return <h2>Hey              👋, how is your day?</h2>
+  }
+
+  return <h2>Hey {profile.traits.firstname}👋, how is your day?</h2>
+};
+```
+
+## Richtext
+
+The Ninetailed Contentful App gives your content creators the option to use inline personalization in richtext fields. This is done by adding embeded entries into the text. To make the personalization working on the developer end the `@ninetailed/experience.js-gatsby` SDK provides functions which render the personalized entry.
+
+```TypeScript
+import React from 'react';
+import {
+  renderRichText,
+  RenderRichTextData,
+  ContentfulRichTextGatsbyReference,
+} from 'gatsby-source-contentful/rich-text';
+import { MergeTag } from '@ninetailed/experience.js-gatsby';
+
+const options = {
+  renderNode: {
+    [INLINES.EMBEDDED_ENTRY]: (node) => {
+      const id = node.data.target.id;
+      if (node.data.target.__typename === "ContentfulNtMergeTag" && id) {
+        return <MergeTag id={mergeTag.id} />;
+      }
+      return <>{`${node.nodeType} ${id}`}</>;
+    }
+  },
+};
+
+type HeadlineProps = {
+  text: RenderRichTextData<ContentfulRichTextGatsbyReference>;
+};
+
+const Headline: React.FC<HeadlineProps> = ({ text }) => {
+  return <h1>{renderRichText(text, options)}</h1>
+}
+```
+
+## Additional Documentation
+
+**[Documentation](https://docs.ninetailed.io/)**

package/gatsby-browser.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapRootElement = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const experience_js_react_1 = require("@ninetailed/experience.js-react");
+const Tracker_1 = require("./src/lib/Tracker");
+const WrapRootElement = (_a) => {
+    var { children } = _a, options = (0, tslib_1.__rest)(_a, ["children"]);
+    return (react_1.default.createElement(experience_js_react_1.NinetailedProvider, Object.assign({}, options),
+        react_1.default.createElement(Tracker_1.Tracker, null),
+        children));
+};
+const wrapRootElement = (args, options) => {
+    const { element } = args;
+    return react_1.default.createElement(WrapRootElement, Object.assign({}, options), element);
+};
+exports.wrapRootElement = wrapRootElement;
+//# sourceMappingURL=gatsby-browser.js.map

package/gatsby-browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gatsby-browser.js","sourceRoot":"","sources":["../../../packages/gatsby/gatsby-browser.tsx"],"names":[],"mappings":";;;;AAAA,+DAAuC;AAEvC,yEAAqE;AAErE,+CAA4C;AAG5C,MAAM,eAAe,GAA4B,CAAC,EAGjD,EAAE,EAAE;QAH6C,EAChD,QAAQ,OAET,EADI,OAAO,2BAFsC,YAGjD,CADW;IAEV,OAAO,CACL,8BAAC,wCAAkB,oBAAK,OAAO;QAC7B,8BAAC,iBAAO,OAAG;QACV,QAAQ,CACU,CACtB,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,eAAe,GAAG,CAC7B,IAAgC,EAChC,OAAsB,EACtB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IAEzB,OAAO,8BAAC,eAAe,oBAAK,OAAO,GAAG,OAAO,CAAmB,CAAC;AACnE,CAAC,CAAC;AAPW,QAAA,eAAe,mBAO1B"}

package/gatsby-node.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluginOptionsSchema = void 0;
+const pluginOptionsSchema = ({ Joi, }) => {
+    return Joi.object({
+        clientId: Joi.string()
+            .required()
+            .description('Your organizations\' client id.')
+            .messages({
+            'any.required': '"clientId" needs to be specified. Get your clientId from the dashboard.',
+        })
+    });
+};
+exports.pluginOptionsSchema = pluginOptionsSchema;
+//# sourceMappingURL=gatsby-node.js.map

package/gatsby-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gatsby-node.js","sourceRoot":"","sources":["../../../packages/gatsby/gatsby-node.tsx"],"names":[],"mappings":";;;AAGO,MAAM,mBAAmB,GAAG,CAAC,EAClC,GAAG,GACqB,EAAqB,EAAE;IAC/C,OAAO,GAAG,CAAC,MAAM,CAAC;QAChB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE;aACnB,QAAQ,EAAE;aACV,WAAW,CAAC,iCAAiC,CAAC;aAC9C,QAAQ,CAAC;YACR,cAAc,EACZ,yEAAyE;SAC5E,CAAC;KACL,CAAC,CAAC;AACL,CAAC,CAAC;AAZW,QAAA,mBAAmB,uBAY9B"}

package/gatsby-ssr.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapRootElement = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const experience_js_react_1 = require("@ninetailed/experience.js-react");
+const wrapRootElement = (args, options) => {
+    const { element } = args;
+    return react_1.default.createElement(experience_js_react_1.NinetailedProvider, Object.assign({}, options), element);
+};
+exports.wrapRootElement = wrapRootElement;
+//# sourceMappingURL=gatsby-ssr.js.map

package/gatsby-ssr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gatsby-ssr.js","sourceRoot":"","sources":["../../../packages/gatsby/gatsby-ssr.tsx"],"names":[],"mappings":";;;;AAAA,+DAA0B;AAE1B,yEAAqE;AAI9D,MAAM,eAAe,GAAG,CAC7B,IAA6B,EAC7B,OAAsB,EACtB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IAEzB,OAAO,8BAAC,wCAAkB,oBAAK,OAAO,GAAG,OAAO,CAAsB,CAAC;AACzE,CAAC,CAAC;AAPW,QAAA,eAAe,mBAO1B"}

package/index.js

@@ -0,0 +1,2 @@
+// This needs to exist, so the gatsby plugin build process works.
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../packages/gatsby/index.js"],"names":[],"mappings":"AAAA,iEAAiE"}

package/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+    displayName: 'experience-sdk-gatsby',
+    preset: '../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': [
+            'babel-jest',
+            { cwd: __dirname, configFile: './babel-jest.config.json' },
+        ],
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../coverage/packages/gatsby',
+};
+//# sourceMappingURL=jest.config.js.map

package/jest.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jest.config.js","sourceRoot":"","sources":["../../../packages/gatsby/jest.config.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,GAAG;IACf,WAAW,EAAE,uBAAuB;IACpC,MAAM,EAAE,sBAAsB;IAC9B,SAAS,EAAE;QACT,gBAAgB,EAAE;YAChB,YAAY;YACZ,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE,0BAA0B,EAAE;SAC3D;KACF;IACD,oBAAoB,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC;IAChD,iBAAiB,EAAE,gCAAgC;CACpD,CAAC"}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@ninetailed/experience.js-gatsby",
+  "version": "1.7.0-beta.0",
+  "main": "index.js",
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "ninetailed",
+    "personalization",
+    "a/b testing"
+  ],
+  "description": "Ninetailed Gatsby Plugin for dynamic content, personalization and a/b testing.",
+  "homepage": "https://docs.ninetailed.io/frameworks/gatsby",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "gatsby": ">=2.27.4"
+  },
+  "typings": "./src/index.d.ts",
+  "dependencies": {
+    "@ninetailed/experience.js-react": "1.7.0-beta.0",
+    "@analytics/google-analytics": "^0.5.3",
+    "lodash": "^4.17.21",
+    "@ninetailed/experience.js": "1.7.0-beta.0",
+    "analytics": "^0.8.0",
+    "@ninetailed/experience.js-shared": "1.7.0-beta.0",
+    "uuid": "^8.3.2",
+    "ts-toolbelt": "^9.6.0",
+    "locale-enum": "^1.1.1",
+    "i18n-iso-countries": "^7.3.0",
+    "react-intersection-observer": "^8.33.1"
+  }
+}

package/plugin-options.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=plugin-options.js.map

package/plugin-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-options.js","sourceRoot":"","sources":["../../../packages/gatsby/plugin-options.ts"],"names":[],"mappings":""}

package/src/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+require("../gatsby-browser");
+require("../gatsby-node");
+require("../gatsby-ssr");
+(0, tslib_1.__exportStar)(require("./lib/Tracker"), exports);
+(0, tslib_1.__exportStar)(require("@ninetailed/experience.js-react"), exports);
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/gatsby/src/index.ts"],"names":[],"mappings":";;;AAAA,6BAA2B;AAC3B,0BAAwB;AACxB,yBAAuB;AAEvB,6DAA8B;AAC9B,+EAAgD"}

package/src/lib/Tracker/Tracker.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tracker = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const react_2 = require("react");
+const router_1 = require("@reach/router");
+const experience_js_react_1 = require("@ninetailed/experience.js-react");
+const usePrevious = (value) => {
+    const ref = (0, react_2.useRef)();
+    (0, react_2.useEffect)(() => {
+        ref.current = value;
+    });
+    return ref.current;
+};
+const Executor = ({ location }) => {
+    const { page } = (0, experience_js_react_1.useNinetailed)();
+    const previousPathname = usePrevious(location);
+    const pathname = location.pathname;
+    (0, react_2.useEffect)(() => {
+        if (pathname !== previousPathname) {
+            page();
+        }
+    }, [pathname, previousPathname, page]);
+    return null;
+};
+const Tracker = () => {
+    return react_1.default.createElement(router_1.Location, null, (location) => react_1.default.createElement(Executor, Object.assign({}, location)));
+};
+exports.Tracker = Tracker;
+//# sourceMappingURL=Tracker.js.map

package/src/lib/Tracker/Tracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tracker.js","sourceRoot":"","sources":["../../../../../../packages/gatsby/src/lib/Tracker/Tracker.tsx"],"names":[],"mappings":";;;;AAAA,+DAA0B;AAC1B,iCAA0C;AAC1C,0CAA0D;AAE1D,yEAAgE;AAEhE,MAAM,WAAW,GAAG,CAAC,KAAU,EAAE,EAAE;IACjC,MAAM,GAAG,GAAG,IAAA,cAAM,GAAE,CAAC;IACrB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,CAAC,CAAC;IACH,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC,CAAC;AAEF,MAAM,QAAQ,GAA8B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3D,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,mCAAa,GAAE,CAAC;IACjC,MAAM,gBAAgB,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC;IAEnC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ,KAAK,gBAAgB,EAAE;YACjC,IAAI,EAAE,CAAC;SACR;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAAC;IAEvC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEK,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,OAAO,8BAAC,iBAAQ,QAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,8BAAC,QAAQ,oBAAK,QAAQ,EAAI,CAAY,CAAC;AACzE,CAAC,CAAC;AAFW,QAAA,OAAO,WAElB"}

package/src/lib/Tracker/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+(0, tslib_1.__exportStar)(require("./Tracker"), exports);
+//# sourceMappingURL=index.js.map

package/src/lib/Tracker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/gatsby/src/lib/Tracker/index.ts"],"names":[],"mappings":";;;AAAA,yDAA0B"}