Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

First steps: CONTENTFUL SETUP

  1. Create new Contentful Space

In the Contentful UI, request for a new space or create your new space. Turn on orchestration for the new space.

  1. Install Contentful Reference Types

Next, install or request to install necessary content types into newly generated space via content orchestration.

Included in the install are Contentful Types:

  • Client

  • Vendor

  • LLC

  • Media Wrapper

  • Franchise

  • Sales Tax Category

  • Subscription

  • Contact Information

  • Product

  • Digital Download

  • List

  • Guru

  • Item

  • Copywriter

  • Global Client Directory

  • Promotion Idea

  • Brand Colors

  • Advertisement

  • Article

  1. Install Contentful Layout Reference Type

Install layout types from reference space and populate the entries within your space

  1. Generate API keys in the Contentful UI

Under the settings tab in the UI, go to “API Keys”. Click the “Add API key” button and generate a new set of keys. For this project, you will need your Space ID and Content Delivery API - access token.

  1. Populate your space with content entries

Add new content entries into your space, including layout types.

Next Steps: Blueshift Configuration

Populate blueshift catalogs to use in live content campaigns to feed into the project

  1. Populate Blueshift Catalogs

This will actually be handled automatically. Once every new content entry is published (excluding layout entries), Contentful will push that published entry to Blueshift via webhook and middleware. Once published, a new item will appear in the Blueshift catalog within a couple minutes or less.

  1. Configure Recommendation Scheme

Head into recommendation engine and built out a new scheme utilizing the existing catalog items.

  1. Configure Live Content Slot

Once recommendation scheme is built. Head over to the live content create tab. Generate a new live content slot and give it a name & choose JSON format.

  1. Configure Live Content Template

After live content slot creation, create a new live content JSON template. Choose the newly created recommendation scheme under the recommendation tab in the template editor. Once chosen, you should see your items populate as a JSON object, with a list of products.

*note: in the actual project code, the returned live content product data is expecting a specific format, you will have to make changes in the code if formatted differently.

  1. Live Content Campaign Creation

Once live content slot & templates are created, create a new campaign and choose live content campaign in order to use what we just created. Configure the campaign to include that new slot & template. Launch the campaign and we should be up and running.

Next Steps: NEXTJS SETUP

Once your Contentful space is populated with content entries & the Blueshift account has recommendation blocks + live content campaigns, continue onto the NextJS steps.

  1. Clone NextJS template

Request access & clone repository

  1. Check NodeJS Version

Make sure your NodeJS is at minimum to run Next13. Current Node Version needed: v16.8

  1. Install and or Uninstall Dependencies Within the Repository

In the command line, run 

npm install

  1. Add Contentful API Keys to .env.local file

In the project directory, access the .env.local.example file. Create a .env.local file or Duplicate the example file and remove the ".example." Then add your API keys like so:

CONTENTFUL_SPACE_ID=your Space ID
CONTENTFUL_ACCESS_TOKEN=Content Delivery API token
CONTENTFUL_PREVIEW_ACCESS_TOKEN=Content Preview API token 
CONTENTFUL_ENVIRONMENT_ID=Choose env To Pull Data From
//Blueshift event api key is not currently an env var 
//because it is being used on the client
//it currently exists in the /public-keys/blueshift dir as 
//an exported variable.
export const bsft_event_key=your blueshift event api key

  1. Change the contentful fetch uri

Within the project, locate the directory: “lib”, there will be a file called “api” where the central fetch to Contentful operation lives. The uri is pointing to a specific environment, change this to whichever environment you will be using, ie: dev, master, etc…. You can also remove anything after the space id and it will default to master env.

export async function fetchGraphQL(query: string, preview = false) {
  return fetch(
    `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}/environments/YOUR_ENV_HERE`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${
          preview
            ? process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN
            : process.env.CONTENTFUL_ACCESS_TOKEN
        }`,
      },
      body: JSON.stringify({ query }),
    }
  ).then((response) => response.json());
}

  1. Start the dev server

Once project is configured, run:

npm run dev

to start the dev server and run the project locally.

  1. Build out the app

If there are no content entries in Contentful, you may see an error page upon dev server start. If not, you’ll see some components load. Feel free to change or remove any components.

Finishing Touches: Deployment

  1. Deploy App (We Chose Vercel)

Deploy app to whichever hosting platform you choose. We found Vercel to be the simplest, due to it’s built in integration with NextJS.

  1. Create a Build Hook

In Vercel under settings within the Git tab, create a “Deploy Hook.” Add this hook to the Contentful webhooks or use Contentful’s built in Vercel integration. This hook will trigger a rebuild of the site once any new triggerable content entry is published.

  • No labels
Unknown macro: {html-macro}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">