Skip to main content

Enabling Optimize on an Existing Sanity Project

This guide will walk you through adding Uniform Optimize to an existing Sanity project as well as linking the Uniform Optimize Sanity plugin to your Uniform Optimize project.

Navigate to https://uniform.app/ and create an account if you have not already and accept the Terms of use and Privacy Policy.

./assets/Untitled.png

Provide a project name that will allow you to identify this project later. Select Create your first intent. This option bypasses the onboarding flow associated with creating a new starter site. This option will also allow the creation of intents for your existing site.

./assets/Untitled-1.png

Name and provide a description, optionally, for your first intent.

./assets/Untitled-2.png

Click on the project that you just created from the project list.

./assets/Untitled-3.png

The first intent that we created during onboarding should be visible when we click through to the project. We will create an API key that we will use to connect Sanity to Uniform Optimize; click the Create an API key link near the Publish button.

  • Click the (+) button to create a new API key.
  • Give the key a descriptive name, such as 'Sanity'
  • Add permissions to the project that you created previously.
  • Check off the Uniform Optimize > Read Drafts permission. This will let Sanity read un-published intent data that it needs.
  • Click Create, and save the API key and project ID you are shown for later. If you forget the API key value, you will need to delete and re-create the key; it is only shown once.

Once the API Key is added, use the back button to return to your project, then click Publish to publish our first intent.

Sanity Plugin Installation#

Install npm Package#

In your Sanity Studio project, add the Uniform Optimize for Sanity plugin npm package:

npm install @uniformdev/sanity-plugin-uniform-optimize

Add plugin to sanity.json#

After installation of the npm package, add a reference to the plugin in your Sanity Studio sanity.json file:

{  ...  "plugins": [    ...    "@uniformdev/sanity-plugin-uniform-optimize"  ],  ...}

Add Uniform Optimize Intent Tags Field to Content Schema#

Add a custom Intent Tags field to your schema once the Uniform Optimize plugin has been installed:


const myContentSchema {  title: 'Custom Entry',  name: 'customentry',  type: 'document',  fields: [    ...    {      name: 'unfrmOptIntentTag',      // type must be "uniform.intenttags" in order for the Uniform Optimize plugin to attach properly.      type: 'uniform.intenttags',      title: 'Intent Tags',    },  ],};
tip

Intent Tags field definitions:

name property value is utilized by developers when referencing the field in application code.

title property value is shown as the field name to content editors when editing within Sanity.

Uniform Optimize for Sanity Plugin Usage#

Sanity Studio is now ready to run. When you create or edit a content entry using the document type you defined above, you should see a custom field named "Intent Tags" in the content entry.

info

If this is your first time using the Uniform Optimize plugin in your Sanity Studio, the "Intent Tags" field will prompt you to configure the connection to Uniform Optimize.

Uniform Optimize API Key is the API Key that you created/copied within the Uniform Optimize dashboard earlier.

Uniform Optimize Project ID is the ID of the project that the API key was granted access to. You can find this when creating the API key, or on the project's General Settings at the bottom.

Uniform Optimize API Host is https://uniform.app.