Using the FrosmoPlacement component
After you've installed the Frosmo React Connector to your application project, you can start using the FrosmoPlacement
component in your application. You wrap every React component whose display rules and content are to be Frosmo-managed inside a FrosmoPlacement
component. The FrosmoPlacement
component requires a placement and at least one modification to provide the display rules and content. The association between the FrosmoPlacement
component and the placement relies on a shared ID, which you must use both as the id
prop value of the FrosmoPlacement
component and as the target element selector of the placement. For more information about creating the placement and modifications, see Creating placements and modifications for React.
To use the FrosmoPlacement
component in a React application:
-
Import
FrosmoPlacement
from thefrosmo-react
module.import { FrosmoPlacement } from 'frosmo-react';
-
Wrap your Frosmo-managed component inside a
FrosmoPlacement
component. In the following example,PersonalizedContent
is a custom component, which you would define elsewhere in the React code.<FrosmoPlacement>
<PersonalizedContent />
</FrosmoPlacement> -
Define an
id
prop for theFrosmoPlacement
component. The value you set for the prop must also be used for the target element selector of the placement. Theid
prop associates the component to the corresponding placement in the Frosmo Platform.<FrosmoPlacement id="frosmo-placement">
<PersonalizedContent />
</FrosmoPlacement> -
Optionally, to further specify its behavior, define additional props for the
FrosmoPlacement
component. The following example defines theDefaultContent
custom component as the default component to render as the content of theFrosmoPlacement
component.<FrosmoPlacement id="frosmo-placement" defaultComponent={DefaultContent}>
<PersonalizedContent />
</FrosmoPlacement>For more information about the available props, see FrosmoPlacement props.
-
Optionally, use the
frosmoModificationContext
prop in a child component to access the content and event tracking functionality of the associated modification. The following example uses thefrosmoModificationContext.content
property to get and display the modification content.class PersonalizedContent extends Component {
render() {
const content = {__html: this.props.frosmoModificationContext.content};
return (
<div dangerouslySetInnerHTML={content} />
);
}
}
<FrosmoPlacement id="frosmo-placement" defaultComponent={DefaultContent}>
<PersonalizedContent />
</FrosmoPlacement>For more information, see frosmoModificationContext object properties.
FrosmoPlacement props
The following table describes the props that you can define for a FrosmoPlacement
component.
Prop | Description | Type | Role | Example (JSX) |
---|---|---|---|---|
| ID shared by the The ID can be any string that is a valid prop value, such as "frosmo-placement" or "123456". | String | Required |
|
|
If you define this prop, the content of the | Object | Optional |
|
|
| Object | Optional |
|
| If you set this prop to The following example shows the same component rendered inside a Frosmo
note If you set this prop to The default value is | Boolean | Optional |
|
frosmoModificationContext object properties
The following table describes the properties of the frosmoModificationContext
object, which all children of a FrosmoPlacement
component receive as a prop.
Property (data) | Description | Type |
---|---|---|
| Content of the modification as a single string. Newlines and other control characters in the original content are converted into escape sequences in the returned string. The following examples show the content of a modification as defined in the modification and as returned in the Original modification content
Modification content returned in frosmoModificationContext.content
| String |
| Template defaults defined for the modification, if any. The following examples show two template defaults as defined in the modification and as returned in the Template defaults in the modification (JSON object)
Template defaults in the params property (JavaScript object)
The template defaults are also available as props in all children of the
For more information about templates, see Templates. | Object |
| Number of the modification variation whose content was returned. | Number |
Property (function) | Description | Type |
| Function for setting which HTML elements to start tracking for clicks, displays, and true displays when calling The function takes one parameter:
For more information, see Tracking basic events for React fragments. info You only need this function when implementing click, display, and true display tracking for a child component that is rendered as a fragment. You do not need this function if you have no fragments or do not want to track their content for clicks, displays, and true displays. | Function |
| Function for starting click, display, and true display tracking for the elements set by For more information, see Tracking basic events for React fragments. info You only need this function when implementing click, display, and true display tracking for a child component that is rendered as a fragment. You do not need this function if you have no fragments or do not want to track their content for clicks, displays, and true displays. | Function |
| Function for manually triggering a display event for the modification. Use this function if a child of the | Function |
| Function for manually triggering a true display event for the modification. Use this function if a child of the | Function |
| Function for manually triggering a click event for the modification. Use this function if a child of the | Function |
Tracking basic events for React fragments
If a FrosmoPlacement
component is rendered as a fragment, the Frosmo Platform does not automatically track the rendered content for clicks, displays, and true displays. You must explicitly implement the tracking for each child component whose content you want to track.
To track clicks, displays, and true displays for a child component:
-
In the child component, define an
HTMLElement
referencing the content you want to track. -
Call
frosmoModificationContext.setTrackableElements()
with theHTMLElement
as the parameter. -
Call
frosmoModificationContext.startTracking()
. -
Return the content to be tracked.
The following example shows a simple class component that sets up basic event tracking for the <div>
element it returns.
class PersonalizedContent extends Component {
componentDidMount() {
// Get the DOM element reference.
const el = this.ref.current;
this.props.frosmoModificationContext.setTrackableElements(el);
this.props.frosmoModificationContext.startTracking();
}
render() {
return (
<div ref={ref => { this.ref = ref }}>
<p>My personalized content.</p>
);
}
}
<FrosmoPlacement id="react-placement" useFragment={true}>
<PersonalizedContent />
</FrosmoPlacement>