DEV Community: Andy Kaiser

Make Personalized Content Fast and Easier with Vercel Edge Functions and Ninetailed

Andy Kaiser — Tue, 26 Oct 2021 16:40:13 +0000

Before diving into the edge functions, let's start talking about edge computing and how we came to edge computing.

For the last years, everyone is started talking about the edge. It became the next big thing after cloud, IoT, and blockchain.

In the beginning, the first computers were big, isolated computers that people could only access directly. Then we had personal computers. Personal computers could do computing in a much more distributed manner. At that time, data was saved on a user's computer locally.

Next, cloud computing came into our lives. Cloud services are infrastructure, platforms, or software that are hosted by third-party providers and made available to users through the internet.

However, due to the distance between clients and the data centers where cloud services are hosted, cloud computing can cause delays. For this reason, edge computing entered our lives.

Edge computing is a networking philosophy focused on bringing computing as close to the source of data as possible in order to reduce latency and bandwidth use. In simpler terms, edge computing means running fewer processes in the cloud and moving those processes to local places, such as on a user's computer, an IoT device, or an edge server. Bringing computation to the network's edge minimizes the amount of long-distance communication that has to happen between a client and server.

In summary:

First Computing: One centralized computer running applications and storing data locally
Personal Computing: Decentralized computers running applications and storing data locally
Cloud Computing: Centralized computers running applications and storing data in data centers
Edge Computing: Centralized computers running applications and storing data close to users - either on the device itself or on the network edge

What are Edge Functions

Edge Functions are the solution to bring edge computing to run JavaScript code at the edge before a request is processed, streamlining continuous delivery between backend developers and frontend developers to improve time to market.

This enables development teams to more easily deliver a number of features such as A/B testing, custom authentication, dynamic routing, personalization, and more.

Edge Functions are aimed to make the developer experience easier by allowing you to:

simplify experimentation
customize authentication
personalize web content
enhance security

The Main Benefits of Edge Functions:

Lower Latency

Lower latency is the major benefit of edge functions when it comes to improving the overall performance of your products.

Users of all web apps will experience delays when they face processes requiring communication with an external server. The length of these delays will vary depending on the server's available bandwidth and location, but they can be eliminated entirely by moving more operations to the edge.

Because Edge Functions run on the content delivery network edge node closest to the user, they have lower latency than other options.

Edge SEO

Edge SEO is a field of technical SEO that utilizes serverless (edge) technologies to execute changes to code through using the CDN as a form of middle-ground in which SEO hotfixes and recommendations can be implemented. These changes are agnostic of the website infrastructure (origin source code) and are supported by multiple CDNs through "edge functions" technology.

As it's described earlier, edge functions close the gap between the user and the data source.

Using the edge functions in the website will bring a couple of benefits, such as:

speed
improved site security
possibility to perform A/B testing

Use Cases for Edge Functions

Basically, you can do anything and everything with edge functions. Since you'll be writing code, possibilities will be infinite. Here are just a few use cases for edge functions:

Experimentation: Use edge functions to process and analyze customers' data at the edge in real-time. ****
Personalization: Increase conversion rates by delivering content that automatically tailors based on each user's location and other signals.
Security: Distribute your data across the edge locations with edge functions to distribute and reduce the risk as well.
Authentication: Deliver fast authentication with edge functions by caching and verifying credentials at the edge.

Personalization With Vercel Edge Functions and Ninetailed

Ninetailed is an API-first optimization platform that works with Contentful and other headless CMS platforms. It includes SDKs for Next.js and Vercel Edge Functions to make it simple to integrate personalization on the edge.

This short guideline walks you through setting up and integrating Ninetailed and Next.js with Edge Functions. In this guide, you'll find:

How to install the SDK for Next.js with Edge Functions
Steps you need to follow to personalize components in Next.js

Step 1: Install Ninetailed SDKs for Next.js and Edge Functions

With the Next.js SDK, you can add dynamic content for personalization to any component. In this step, you need to install Ninetailed SDKs for Next.js

Install module via yarn:

yarn add @ninetailed/experience-sdk-nextjs @ninetailed/experience-sdk-nextjs-ssr @ninetailed/experience-sdk-nextjs-esr

Step 2. Add Ninetailed to the middleware

In the folder pages add the SDKs to the _middleware.ts file.

import { EdgeRequest, EdgeResponse } from 'next'
import {
NinetailedPersonalizationMiddleware
} from '@ninetailed/experience-sdk-nextjs-esr'

// Add the Personalization Middleware

export default async (req: EdgeRequest, res: EdgeResponse) => {
await NinetailedPersonalizationMiddleware({ apiKey: process.env.NINETAILED_API_KEY })(req, res)
}

Step 3. Add Ninetailed to the app

Now, in the same folder, let's add the SDKs to the app.ts file.

import type { AppProps } from 'next/app'
import {
PersonalizationProvider
} from '@ninetailed/experience-sdk-nextjs'
import { ninetailedSSRTrackerPlugin } from '@ninetailed/experience-sdk-ssr'
import { selectNinetailedProfile } from '@ninetailed/experience-sdk-nextjs-esr'

// Add the Personalization Provider

export default function MyApp({ Component, pageProps }: AppProps) {
const profile = selectNinetailedProfile(pageProps)

return <PersonalizationProvider
plugins={[ninetailedSSRTrackerPlugin()]}
profile={profile}
apiKey={process.env.NINETAILED_API_KEY}>
<Component {...pageProps} />
</PersonalizationProvider>
}

Additional Steps

In the documentation of Ninetailed, you can also find a more detailed Quick Start Guide for Developers with additional steps such as:

How to set up Ninetailed App on Contentful
How to use Ninetailed Profiles in Next.js
How to integrate Google Analytics with Ninetailed

The Bottom Line

Vercel Edge Functions provide a completely new way to run JavaScript code at the edge prior to processing a request. They make it easier to deliver features like A/B testing, custom authentication, dynamic routing, and personalization without affecting latency, improving the web core vitals and SEO.

This is why personalization on the edge with Edge Functions and Ninetailed is the way to go to create personalized experiences and improve the overall user experience and SEO.

What I have learned of building a chatbot in GatsbyJS, Contentful and Ninetailed

Andy Kaiser — Tue, 06 Apr 2021 12:32:34 +0000

To begin with, building a Chatbot with GatsbyS and Contentful may appear strange, but it all began with a customer personalization exercise and experiment at my company Ninetailed.

And, spoiler alert, our GatsbyJS, Contentful, and Ninetailed based Chatbot works great and, more importantly, it was fun and quick to develop (we finished it in a couple of hours).

GatsbyJS, Contentful & Ninetailed - An Introduction

We use GatsbyJS for our website ninetailed.io because it is great for creating lightning-fast, accessible, and SEO-friendly websites. It is also easy to use and integrates seamlessly with our headless CMS Contentful.

Ninetailed, on the other hand, is a personalization and optimization platform for modern websites. Not to mention that Ninetailed has a GatbsyJS plugin and a Contentful App to make integration in this stack simple and quick.
Personalizing our website with a Chatbot

We had the idea to integrate a chatbot with the Ninetailed personalization platform during a brainstorming session about personalization experiences. An interactive chatbot is ideal for gathering information from visitors such as intent, job roles, and adapting website content to user data and intent. As a result, the content journey and customer experience are enhanced.

The next step is to select a Chatbot solution. There are numerous advanced Chatbot solutions available, such as Solvemate or Intercom, that combine the power of natural language processing (NLP), rule-based conversations, and human operators.

Following our API-first, rapid prototyping, and agile development philosophy, we decided to create a prototype using our personalization API and SDKs. After all, we want to personalize our website based on visitor intent, and our personalization engine can handle rule-based audiences.

Let's build a chatbot

For our website stack we use GatsbyJs, Contentful, Tailwind CSS and Ninetailed for website personalization. This stack will serve as our starting point...

1. Chatbot flow

First and foremost, we define the chatbot flow. We keep things simple because we're working on a prototype. In this first iteration, we use a decision tree model with two steps and two data points or user traits:

The first step is to request the first name in order to personalize the page and create a demo effect. This also personalizes the guide experience, and we want to highlight our merge tag personalization feature.
The second step is to inquire about the visitor's role. This allows us to match the visitor to one of our personas and adapt the website's content. The role is an important aspect of our marketing personas, as it relates to the visitor's intent.

Chatbot flow

2. Chatbot UI

Because we use Tailwind UI as design system, creating chatbot UI elements like the bubble and chat window is simple and quick.

Chatbot UI example

3. Contentful content model

We create a new content model in Contentful with the following fields:

Name used as entry title.
Image for the chatbot
Message for the chatbot.
Placeholder for the input field.
Button text for the button.
Event ID to define the event to send with the value of the input.

We have a lot of flexibility with this content structure because we can create the chatbot content within Contentful CMS without changing any code and adapt the content variants for personalization with the Ninetailed Personalization App.

4. Ninetailed personalization

Finally, integrating the code with Ninetaled takes only a few minutes because we only need to wrap the chat component with the <Personalize /> component (and install the GatbsyJS plugin if you haven't already).

Chatbot component code example:

import React from "react";
import { ChatFragment } from "../../../@generated/types";

import { ChatApiProvider } from "./ChatApiProvider";
import { Container } from "./Container";
import { Body } from "./Body";
import { Launcher } from "./Launcher";

export const Chat: React.FC<ChatFragment> = (props) => {
 return (
   <ChatApiProvider>
     <Container>
       <Body {...props} />
       <Launcher />
     </Container>
   </ChatApiProvider>
 );
};

Ninetailed personalization code example:

import React, { useEffect } from "react";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { Form, Field } from "react-final-form";
import {
 Profile,
 useAnalytics,
 useProfile,
} from "@ninetailed/client-sdk-react";
import { createRenderNinetailedMergetag } from "@ninetailed/client-sdk-gatsby-contentful";
import { BLOCKS, INLINES, MARKS } from "@contentful/rich-text-types";
import { Options } from "@contentful/rich-text-react-renderer";
import { Link as GatsbyLink } from "gatsby";

import { ChatFragment } from "../../../@generated/types";

import { renderRichText } from "../RichText";
import { sanitizeSlug, Link } from "../Link";
import { useChatApi } from "./ChatApiProvider";
import { CloseButton } from "./CloseButton";

const options = (profile: Profile): Options => ({
 renderNode: {
   [BLOCKS.PARAGRAPH]: (node, children) => (
     <p className="text-sm text-gray-500">{children}</p>
   ),
   [INLINES.HYPERLINK]: (node, children) => (
     <a
       href={node.data.uri}
       target="_blank"
       className="text-indigo-600 hover:text-indigo-500"
     >
       {children}
     </a>
   ),
   [INLINES.ENTRY_HYPERLINK]: (node, children) => (
     <GatsbyLink
       to={sanitizeSlug(node.data.target?.slug)}
       className="font-medium text-indigo-600 hover:text-indigo-500"
     >
       {children}
     </GatsbyLink>
   ),
   [INLINES.EMBEDDED_ENTRY]: (node, children) => {
     if (node.data.target.__typename === "ContentfulLink") {
       return (
         <Link
           className="inline-flex my-2 mr-2 items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
           {...node.data.target}
         />
       );
     }

     return (
       <span className="mr-1">
         {createRenderNinetailedMergetag(profile)[INLINES.EMBEDDED_ENTRY](
           node,
           children
         )}
       </span>
     );

5. Variants and audiences

In Contentful, we must now create variants and specific audiences for the chatbot content. It only takes a few clicks to create personalization variants with Ninetailed and Contentful. If the visitor has filled out a first name and has chosen a role in the chatbot, we create a variant for the chat message.

We use user traits and events for the audiences:

Visitors who have filled out their first names.
Visitors who have chosen a role.

Audience first name

Audience developers

Learnings and next steps

This chatbot integration took us only a few hours to complete. It was not only quick to make, but also enjoyable to work on. This prototype project demonstrated:

Working with your own stack and product must be exciting.
Think outside the box and be inventive in the application of your own product.
Developer experience with your stack and tools is critical. GatbsyJS, Contentful and Ninetailed have an excellent developer experience.
A design system enables rapid prototyping.

As the prototype was successful in development, and after a week, the chatbot's engagement rates are great, we intend to:

Add more steps to the chatbot flow.
Integrate more powerful chatbots.
Create SDKs or integrations with chatbots.

Finally, please let me know what you think about this chatbot prototype and how we used GatsbyJS, Contentful, and Ninetailed to create it. If you want to create a similar chatbot or customize your Contentful website with personalized content, you can install the Ninetailed app for free from the official marketplace.

Web Performance: a look at awareness in tech roles

Andy Kaiser — Wed, 29 Jul 2020 10:12:32 +0000

Initial approach: why this research?

At Ninetailed our main purpose is to improve the user experience and help other companies with it. We are also web performance junkies and are obsessed with persistently improving our service performance in the region of milliseconds.

As marketeers, developers and product managers we abuse the usage of tag managers and third-party scripts. Using external scripts has a data value, but also an adverse consequence: poorer web performance.

Our hypothesis

Our hypothesis is that developers care more about web performance than other digital roles like marketeers and that they consider third-party scripts as an issue for the performance of their websites.

We believe that

We believe that awareness around third-party scripts performance and the impact on the user experience is the first step for multidisciplinary teams to develop optimization strategies.

Results

At the date of the analysis, the survey has 185 answers after promoting it to developers, product managers and marketeers in our professional network and in different Facebook, LinkedIn and Slack groups.

Participants

Roles

Most of the participants are developers (51%), followed by marketeers (21%) and product managers (12%).

Company size

The survey has participants from SMB and also corporations with more than 500 employees. Most of participants work in companies up to 50 employees (70%).

The answers

The main questions of the survey ask how much do the participants agree with a statement. The responses are based on Likert Scale, from “Strongly disagree” (score 1) to “Strongly agree” (score 5).

The survey questions are:

Web performance has a positive impact on the user experience.
Web performance has a positive impact on SEO.
Third-party scripts harm website performance.
Ad Blockers harm website analytics.
Ad Blockers are an issue for me.

The participants strongly agree that performance plays a major role in a good user experience (avg. 4,6) and benefits SEO (avg. 4,5). Most of the respondents agree that third-party scripts are an issue (avg. 4,1). Regarding Ad Blockers, the respondents are neutral, and do not agree nor disagree if Ad Blockers affect their analytics or if they are an issue for them.

Analyzing the responses based on the role we see some minor differences.

The three groups agree that performance has a positive impact in UX and SEO. They also agree that external scripts harm web performance. Marketeers agree most that Ad Blockers harm the website analytics, compared to developers which are neutral and product managers that disagree.

Frameworks and Tag Managers

Finally, 49% of the respondents use a Tag Manager. 62% use a CMS, 22% a Single Page Application and 5% a static site or static site generator.

Conclusions

Not only developers care about performance. The main digital roles which are responsible for a website strongly agree that performance has a positive impact on the user experience and SEO. They also agree that third-party scripts harm the performance and are neutral about Ad Blockers and the impact on website analytics.

Even if there is awareness about performance, the usage of external scripts grows every year. Without more details, we cannot say if this is based on a cost-benefit analysis or the data-needs to optimize the user experience and business goals.

For future surveys we should explore the solutions and efforts put into improving performance and the reasons behind a neutral position towards the impact of Ad Blockers in website analytics and the data-based decision process.

What do you think about these results? Let me know in the comments!

Originally published at ninetailed.io

Web performance & Ad-blockers survey

Andy Kaiser — Tue, 09 Jun 2020 15:13:12 +0000

"Optimizing for quality of user experience is key to the long-term success of any site on the web."

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

I'm conducting a research about website performance, Ad-blockers and user experience. This will help us to understand the importance of optimizing 3rd party scripts and Ad-blockers effect on websites to improve the user experience.

I would appreciate if you take about 2 minutes of your time to share your thoughts about it. Thank you for taking my quick survey!

https://forms.gle/b1CKYH9gzKnsFuUT9