Manage Moments iQ experiences

Moments iQ is in Early Access and is only available to select customers. If you are interested in trying this feature, contact your Tealium Support representative.

To create a Moments iQ experience, navigate to the Tag Marketplace, search for Moments iQ and click + Add. For more information, see About tags.

Position and placement

Configure the following settings to control where the experience appears on a page and how the experience behaves:

• Suppress Experience: Experiences can be automatically suppressed for returning visitors under the following conditions:

  • Never
  • After close button selected
  • After answer submitted
  • After answer submitted or close button selected

  The browser stores this information in local storage as the momentsiq_suppress key.

• Track On Load: Select True to send a tracking call when the experience loads on the page for the first time.

• Tealium Track Type: The type of event used in the utag.track calls that are triggered when tracking modal close and submit actions.

  • View
  • Link

• Experience Type: The type of experience to create.

  • Modal: The experience will appear as a popup window.
  • Embedded: The experience will appear embedded in the page.

• Experience Placement: The location of a modal window. This is only used with the Modal placement option.

• Placement Selector: A CSS selector to identify the page element to place the experience. This is used only with the Embedded placement option. For more information about how to determine an element’s selector, see How to Determine the CSS Selector of an Element.

• Experience Position: The position of the inserted element relative to the element in Placement Selector.

  • Before Begin: Before the page element.
  • After Begin: Inside the page element, before its first child.
  • Before End: Inside the page element, after its last child.
  • After End: After the page element.

• Redirect URL: The URL to redirect the visitor to when the primary button is clicked. Leave this field empty if you do not want to redirect the URL. For example, this can redirect to a thank you page that offers a special offer or a page that contains another experience to ask a follow-up question.

• Redirect Opens Tab: Select True to open a new tab when the visitor is redirected. This option is available only if you enter a value for Redirect URL.

Experience background image

Complete the following steps to add a background image to the experience:

1. Under Image Placement, select whether the image will align with the left or the right of the experience window.
2. Under Image URL, enter a link to an https-secured, externally-hosted image. Suggested image size: 500px by 400px. The file must have a .png, .jpg, .gif, or .svg file extension.

Experience and question text

Configure the text that appears on the experience with the following settings:

• Header Text: The text that appears at the top of the experience.
• Main Text: The text that appears under the header text.
• Question Text: The question to ask your visitors.

Answers

Moments iQ provides multiple question formats that allow you to customize the questions that will guide the visitor to the right experience on your site.

Configure the question and answers with the following settings:

• Answer Type: The input type for the answer.
  • Radio: The visitor can select only a single answer from the displayed list.
  • Text: The visitor can enter their answer in a single line text box.
  • Checkbox: The visitor can select one or more checkboxes with a label.
  • Buttons: The visitor can select one of two answers displayed as buttons.
• Answers: The answers to the question:
  • Radio: A pipe (|) delimited list of answers to display next to each radio button.
    Example: Red|Green|Blue|Teal
  • Text: The placeholder text for the text box.
    Example: ["What is your favorite color?"]
  • Checkbox: A pipe (|) delimited list of answers to display next to each checkbox.
    Example: Red|Green|Blue|Teal
  • Buttons: A pipe (|) delimited list of answers to override the primary and secondary button text. Moments iQ uses only the first two values. Example: Red|Green
• Primary Button Text: The text label for the primary button. The default value is Submit.

Experience appearance

Configure the experience to match the appearance of your site by entering values from your site’s style sheet for the following appearance properties:

Parameter	Description	Example
Header Text Color	The color of the header text, as a hex code or standard color name. The default value is #0A1B36.	#1B1B1B
Main Text Color	The color of the main text, as a hex code or standard color name. The default value is #0A1B36.	#1B1B1B
Question Text Color	The color or the question text, as a hex code or standard color name.	#1B1B1B
Answer Text Color	The color of the answer text, as a hex code or standard color name.	#1B1B1B
Primary Button Text Color	The color of the primary button text, as a hex code or standard color name. The default value is #FFFFFF.	#1B1B1B
Secondary Button Text Color	The color of the secondary button text, as a hex code or standard color name. The default value is #FFFFFF.	#1B1B1B
Header Text Font Family	The font family of the header text. The default value is Arial.	Arial
Main Text Font Family	The font family of the main text. The default value is Arial.	Arial
Question Text Font Family	The font family of the question text.	Arial
Answer Text Font Family	The font family of the question text.	Arial
Primary Button Font Family	The font family of the primary button. The default value is Arial.	Arial
Secondary Button Font Family	The font family of the secondary button. The default value is Arial.	Arial
Header Text Font Size	The font size of the header text. The default value is 16px.	14px
Main Text Font Size	The font size of the main text. The default value is 14px.	14px
Question Text Font Size	The font size of the question text.	14px
Answer Text Font Size	The font size of the answer text.	14px
Primary Button Text Font Size	The primary button text size. The default value is 16px.	16px
Secondary Button Text Font Size	The secondary button text size. The default value is 16px.	16px
Header Text Font Style	The font style of the header text. The default value is normal.	normal
Main Text Font Style	The font style of the main text. The default value is normal.	normal
Question Text Font Style	The font style of the question text.	normal
Answer Text Font Style	The font style of the answer text.	normal
Primary Button Text Font Style	The font style of the primary button. The default value is normal.	normal
Secondary Button Text Font Style	The font style of the secondary button. The default value is normal.	normal
Header Text Font Weight	The font weight of the header. The default value is 700.	normal
Main Text Font Weight	The font weight of the main text. The default value is 400.	normal
Question Text Font Weight	The font weight of the question text.	normal
Answer Text Font Weight	The font weight of the answer text.	normal
Primary Button Text Font Weight	The font weight of the primary button text. The default value is 400.	400
Secondary Button Text Font Weight	The font weight of the secondary button text. The default value is 400.	400
Outer Container Background Color	The background color of the experience, as a hex code or standard color name. The default value is #FCFCFC.	#1B1B1B
Primary Button Background Color	The background color of the primary button. The default value is #1B1B1B.	#1B1B1B
Secondary Button Background Color	The background color of the secondary button. The default value is #1B1B1B.	#1B1B1B
Outer Container Margin	The margin size of the outermost container. The default value is 0. For more information about margin settings, see MDN Web Docs: margin.	1px
Question Container Margin	The margin size of the question’s container. The default value is 0.	0
Answer Container Margin	The margin size of the question’s container. The default value is 0.	0
Question Container Text Align	The alignment direction of the question text in its container. The default value is start.	start
Answer Container Text Align	The alignment direction of the answer text in its container. The default value is start.	start
Answer Container Flex Direction	The alignment direction of the answers, either vertically as a column or horizontally as a row. The default value is column.	column
Answer Container Align Items	The alignment direction of the answers within the container (for example: start, flex-start, or self-start). The default value is flex-start.	flex-start
Outer Container Border Style	The border style of the outermost container of the experience. The default value is none.	none
Outer Container Border Color	The color of the border around the outermost container of the experience, as a hex code or standard color name. You must set a border style to a value other than none for the border color to appear. The radius is 8px.	8px
Outer Container Width	The width of the outermost container. The default value is 500px.	500px
Z-Index	Use to override the z-order positioning of the experience on the page. Higher values stack on top of lower values.	auto

Load rules

Load the experience on all pages or set conditions for when your experience will appear. For more information about load rules and events, see Load Rules and Events.

To avoid data collisions, only one Moments iQ experience can appear on a page at a time. If you have multiple experiences, configure the load rules to ensure that only one experience loads at any time.

Data mappings

Use the following mappings with extensions to get dynamic values in the configurations or keep styling consistent from experience to experience:

Basic Parameters

Variable	Type	Description
type	String	Experience type
placement	String	Experience placement
selector	String	Placement selector
position	String	Experience position
imagePosition	String	Image position
imageUrl	String	Image URL
altText	String	Image alt text
redirect_url	String	Redirect URL
redirect_open_tab	String	Redirect opens tab
zindex	String	Z-index
headerText	String	Header text
mainText	String	Main text
questionText	String	Question text
answerType	String	Answer type
answers	Array	Answers
primaryText	String	Primary button text
trackType	String	Tealium track type
primaryText	String	Primary Button Text
trackType	String	Tealium Track Type
trackOnLoad	String	Track On Load

Text Formatting Parameters

Variable	Type	Description
headerTitle.color	String	Header text color
headerTitle.fontFamily	String	Header text font family
headerTitle.fontSize	String	Header text font size
headerTitle.fontStyle	String	Header text font style
headerTitle.fontWeight	String	Header font weight
mainBodyText.color	String	Main text color
mainBodyText.fontFamily	String	Main text font family
mainBodyText.fontSize	String	Main text font size
mainBodyText.fontStyle	String	Main text font style
mainBodyText.fontWeight	String	Main text font weight
questionContainer.color	String	Question text color
questionContainer.fontFamily	String	Question text font family
questionContainer.fontSize	String	Question text font size
questionContainer.fontStyle	String	Question text font style
questionContainer.fontWeight	String	Question font weight
answerContainer.color	String	Answer text color
answerContainer.fontFamily	String	Answer text font family
answerContainer.fontSize	String	Answer text font size
answerContainer.fontStyle	String	Answer text font style
answerContainer.fontWeight	String	Answer font weight
primaryButton.color	String	Primary button text color
primaryButton.fontFamily	String	Primary button font family
primaryButton.fontSize	String	Primary button text font size
primaryButton.fontStyle	String	Primary button font style
primaryButton.fontWeight	String	Primary button font weight
secondaryButton.color	String	Secondary button text color
secondaryButton.fontFamily	String	Secondary button font family
secondaryButton.fontSize	String	Secondary button text font size
secondaryButton.fontStyle	String	Secondary button font style
secondaryButton.fontWeight	String	Secondary button font weight

Container Formatting Parameters

Variable	Description
outerContainer.background	String
outerContainer.margin	String
outerContainer.borderStyle	String
outerContainer.borderColor	String
outerContainer.borderRadius	String
outerContainer.width	String
questionContainer.margin	String
questionContainer.textAlign	String
answerContainer.margin	String
answerContainer.textAlign	String
primaryButton.background	String
primaryButton.borderRadius	String
secondaryButton.background	String
secondaryButton.borderRadius	String
radioContainer.alignItems	String
radioContainer.flexDirection	String
checkboxContainer.alignItems	String
checkboxContainer.flexDirection	String
textFieldContainer.alignItems	String
textFieldContainer.flexDirection	String
textFieldContainer.alignItems	String

Container and Text Objects

Variable	Type	Description
headerTitle	[Object]	Header Text
mainBodyText	[Object]	Main Text
questionContainer	[Object]	Question
answerContainer	[Object]	Answer
primaryButton	[Object]	Primary button
secondaryButton	[Object]	Secondary button
outerContainer	[Object]	Outer container
radioContainer	[Object]	Radio answer container
checkboxContainer	[Object]	Checkbox answer container
textFieldContainer	[Object]	Text field answer container
footerContainer	[Object]	Footer container
imageNode	[Object]	Image element

Data layer variables

The experience automatically adds the following variables to the data layer:

momentsiq_id, UDO Variable
momentsiq_question1, UDO Variable
momentsiq_question1_type, UDO Variable
momentsiq_questions_answered, UDO Variable
momentsiq_answer1, UDO Variable
momentsiq_suppress, Local Storage Variable

Client-side data persistence

If you want to personalize the visitor experience using the visitor responses to Moments iQ experiences with only client-side tools, you need to store the visitor’s responses with the Persist data values extension cookie.

The following image demonstrates an example of such an extension:

For more information, see Persist data value extension.

Server-side integration

If you plan to integrate Moments iQ with server-side products such as AudienceStream or EventStream, you will need to collect the data through the Tealium Collect tag and link Tealium iQ to an AudienceStream profile.

To enrich server-side attributes, create a rule to ensure that momentsiq_answer1 contains an answer and that momentsiq_id matches the UID of the experience you created.

Example:

Also, if you plan to leverage AudienceStream variables in Moments iQ rules, you will need to enable data layer enrichment.

For more information, see About data layer enrichment and Tealium Collect tag.

Save and publish

To test and release your experience, follow the same workflow for other tags. For more information, see About tags.