Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 11.3

...

You have created the placement. For more information about placement settings, see Creating and editing a placementplacement#Placement settings.

Creating the modification

...

  1. Get the Frosmo <script> elements for your site. For more information, see Setting up the Frosmo Platform for your Creating and managing sites#Getting the script elements for a site.
  2. Edit the /public/index.html file of the application, add the <script> elements to the end of the <head> element, and save the file.

    Frosmo scripts in Create React App

  3. To check that the platform is successfully integrated with the application, open the browser console, and enter frosmo.easy. If the integration platform and application are integrated, the console displays information about the frosmo.easy object.

    Frosmo Platform successfully integrated

    If the object is undefined, or if the console displays an error, check that the <script> elements in /public/index.html are correct.

...

  1. Open the /src/App.js file in your editor.
  2. Replace the existing content with the following code. This code strips the page of everything but the React logo and rewrites the App component as a class.

    Code Block
    languagejs
    themeRDark
    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
            </header>
          </div>
        );
      }
    }
    
    export default App;


  3. Import the FrosmoPlacement component from the frosmo-react module.

    Code Block
    languagejs
    themeRDark
    import { FrosmoPlacement } from 'frosmo-react';


  4. Add a FrosmoPlacement component as the first piece of content inside the <div> element, before the <img> element. Configure the component as follows:

    • Define the id prop as "frosmo-logo". This allows the React Connector to associate the component to the placement and modification you created earlier.
    • Define the defaultComponent prop as {DefaultContent}. This sets the DefaultContent component, which you'll create later, as the initial content of the component.
    • Define the component content as <FrosmoLogo />. This sets the FrosmoLogo component, which you'll create later, as the actual content of the component.

    For more information about the props, see Using the FrosmoPlacement componentcomponent#FrosmoPlacement props.

    Code Block
    languagejs
    themeRDark
    <FrosmoPlacement id="frosmo-logo" defaultComponent={DefaultContent}>
      <FrosmoLogo />
    </FrosmoPlacement>


  5. Create the DefaultContent component. 

    Code Block
    languagejs
    themeRDark
    class DefaultContent extends Component {
      render() {
        return (
          <p>I will be replaced by modification content?</p>
        );
      }
    }


  6. Create the FrosmoLogo component. Get the modification content from the content property of the frosmoModificationContext prop, and use the dangerouslySetInnerHTML element attribute provided by React to display the content. For more information about the prop, see Using the FrosmoPlacement componentcomponent#FrosmoPlacement props. For more information about the attribute, see the React documentation.

    Code Block
    languagejs
    themeRDark
    class FrosmoLogo extends Component {
      render() {
        const content = { __html: this.props.frosmoModificationContext.content };
        return (
          <div dangerouslySetInnerHTML={content} />
        );
      }
    }


  7. Save the file. Create React App automatically refreshes in your browser and now displays the Frosmo logo above the React logo.

    Create React App with Frosmo

...

You have created the trigger. For more information about trigger settings, see Creating and editing a triggertrigger#Trigger settings.

Creating the segment

To create the segment:

...

You have created the segment. For more information about segment settings, see Creating segmentsand editing a segment#Segmentation settings.

Updating the modification to use the segment

...