Using Merge Tags

Merge tags allow you to data specific to a user's profile in content. You might for example want to greet the user by the city they are visiting from. Rather than creating a new variation of content for every possible city, merge tags allow you to use information specific to each visitor's profile as dynamic content.
Creating Merge Tags
A merge tag is an entry like any other in your CMS. To create one, use your CMS' capabilities to create a new entry of type "Ninetailed Merge Tag". In the Merge Tag ID field, specify using dot notation the property you want to pull from the user's profile.
For example, you might use location.city as the Merge Tag ID to pull the user's city. You can also trait information if you collect it on profiles. As another example, you might use traits.firstName if you capture names from a nientailed.identify call.
Adding Merge Tags to Content
Merge tags are added to content as inline embedded entries within rich text fields. in this way, merge tags act as variables or placeholders for information that will be dynamically populated. To use a merge tag:
Ensure that a Rich Text field fo your choosing is configured to support inline embeds of the Ninetailed Merge Tag content type
Create at least one merge tag in your CMS project
Embed the merge tag within the rich text field of an entry
Rendering Merge Tags
Use the <MergeTag> component provided by our React SDKs to render out the content dynamic to each user's profile. The <MergeTag> component takes an id parameter that should be the value of the Merge Tag ID field populated in the CMS.
Different CMSs have different conventions for rendering rich text. As an example, Contentful provides libraries for all major JS frameworks to render rich text easily. Here is an example on how to render Ninetailed MergeTags through the Contentful react rich text renderer.
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { MergeTag } from '@ninetailed/experience.js-next';
​
const RichTextSection = () => {
  const RTComponent = documentToReactComponents(rtd, {
    renderNode: {
      [INLINES.EMBEDDED_ENTRY]: (node) => {
        // ... you other embedded entries
      
        if (node.data.target.sys.contentType.sys.id === 'nt_mergetag' && node.data.target.fields.nt_mergetag_id) {
          return <MergeTag id={node.data.target.fields.nt_mergetag_id} />;
        }
​
        return null;
      }
    }
  });
  
  return <RTComponent />
}
Last modified 4d ago