npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ninetailed/experience-sdk-gatsby

v2.7.1-beta.0

Published

Ninetailed Gatsby Plugin for dynamic content, personalization and a/b testing.

Downloads

4

Readme

@ninetailed/client-sdk-gatsby-contentful

Add dynamic content personalization to Gatbsy without performance trade-offs or complex integrations.

@ninetailed/client-sdk-gatsby-contentful is a React component specially designed to work seamlessly with Gatsby, Contentful and Ninetailed.

Demo

Contentful App

Table of Contents

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 platform includes:

  • Real-time personalization API and customer data platform (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.
  • Optional edge side rendering for maximum web performance.

Install

Install the gatsby-plugin-ninetailed and contentful-plugin-ninetailed modules via npm or yarn.

Install module via npm

npm install @ninetailed/gatsby-plugin-ninetailed @ninetailed/client-sdk-gatsby-contentful

Install module via yarn

yarn add @ninetailed/gatsby-plugin-ninetailed @ninetailed/client-sdk-gatsby-contentful

How to use

Add the plugin to the plugins array in your gatsby-config.js and your API Key.

plugins: [
    ...your other gatsby plugins
    {
        resolve: `gatsby-plugin-ninetailed`,
        options: {
            apiKey: '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 ProfileProvider or AnalyticsProvider 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 generate incorrect 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.

import React from 'react';
import { Personalize } from '@ninetailed/client-sdk-react';

type HeadlineProps = {
  text: string;
}

const Headline: React.FC<HeadlineProps> = ({ text }) => {
  return <h1>{text}</h1>
};

export const Page = () => {
  // These variants come from the Ninetailed Contentful App
  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.

import React, { useState, useEffect } from 'react';
import { useProfile } from '@ninetailed/client-sdk-react';

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>
};

Contentful 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/client-sdk-gatsby-contentful SDK provides functions which render the personalized entry.

import React from 'react';
import {
  renderRichText,
  RenderRichTextData,
  ContentfulRichTextGatsbyReference,
} from 'gatsby-source-contentful/rich-text';
import { createRenderNinetailedMergetag } from '@ninetailed/client-sdk-gatsby-contentful';

const textOptions = (profile: Profile) => ({
  renderNode: {
    // ... your own richtext render options
    ...createRenderNinetailedMergetag(profile),
  },
});

type HeadlineProps = {
  text: RenderRichTextData<ContentfulRichTextGatsbyReference>;
};

const Headline: React.FC<HeadlineProps> = ({ text }) => {
  const [loading, profile, error] = useProfile();

  return <h1>{renderRichText(text, textOptions(profile))}</h1>
}

Additional Information