Pages

This example shows you how to develop and test a simple site banner with FProxy and the Frosmo Debugger. The example uses test mode and will therefore not disrupt your live site content, meaning your visitors will not see the site banner you create.

Simple site banner

Figure: Simple site banner

Before you proceed, install FProxy and create a bookmarklet for the Frosmo Debugger. For more information, see Installation.

To create the site banner:

  1. Create the site banner placement and modification in the Frosmo Control Panel.
  2. Initialize a local directory for storing the site banner content.
  3. Start the FProxy server.
  4. Download, edit, test, and upload the site banner content.

Creating the site banner placement and modification

Creating the site banner placement

To create the site banner placement:

  1. In the Control Panel, select Modifications > Placements.
  2. Click Create placement.
  3. Define the following settings:

    • Name: Enter "Site Banner - All Pages".
    • Target element: Select CSS selector, and enter "body" as the selector name.
    • Display method: Select Before content.

    The target element and display method together place the modification as the first piece of content within the body element.

    Creating the site banner placement

  4. Click Save.

You have created the site banner placement. For more information about placement settings, see Creating and editing a placement.

Creating the site banner modification

To create the site banner modification:

  1. In the Control Panel, select Modifications > Overview.
  2. Click Create modification.
  3. Enter "Site Banner" as the modification name, select Personalization as the modification case, and click Create. You could also select another case, but since this modification needs only the one variation, Personalization is the natural choice here.

    Creating the site banner modification

    The Basic settings view opens.

  4. Select the placement for the modification:
    1. In the Placement section, click Select placement.

      Selecting the placement for the site banner modification

    2. Select the placement you created for the site banner.

      Selecting the placement for the site banner modification

    3. Click Save.
  5. Define the content for the modification:
    1. In the Content section, click the variation name.

      Defining the content for the site banner modification

    2. In the variation settings, make sure the selected content type is Custom content, which is the default setting.
    3. In the Content field, enter the following placeholder content. You will develop the content further in your local file system.

      <div>TODO</div>
      
      <style>/* TODO */</style>
    4. Click Save.
    5. In the Content section, click the quick menu button for the variation, and select Activate.

      Defining the content for the site banner modification

    6. If you want to disable the comparison group for the modification, click the quick menu button for the group, and select Deactivate.
  6. Enable test mode for the modification:
    1. In the Advanced settings section, click Define settings.

      Enabling test mode for the site banner modification

    2. In the Audience section, enable Test mode.

      Enabling test mode for the site banner modification

    3. Click Save.
  7. Activate the modification:
    1. At the bottom of the Basic settings view, click Activate.
    2. To confirm, click Activate.
  8. Click Close.
  9. In the modifications list, copy the modification ID, as you'll need it later with FProxy.

    Site banner modification ID

    The ID of your modification will differ from the one in the above figure.

  10. On your site, preview the modification in its unfinished state by activating test mode. (If test mode is deactivated, you will not see the modification.) You can activate test mode either through the URL or from the Frosmo Debugger. For more information, see Test mode and Frosmo Debugger.

    Hot-reloaded changes in the site banner modification

You have created the site banner modification. For more information about modification settings, see Creating and editing a modification.

Initializing a local directory for storing the site banner content

You need to initialize a directory in your local file system as the FProxy sites directory for your site. FProxy will store your site's modification content in a site directory inside the sites directory.

To initialize the sites directory for your site:

  1. In your terminal, go to the directory that you want to initialize.
  2. Start the initialization process:

    fproxy init
  3. If not already defined, select the port number for the FProxy server. To use the default port number press Enter. If you want to define another port number, enter a new port number, and press Enter.
  4. If not already defined, select whether you want to use HTTPS with the FProxy server. If you do, enter "y", and press Enter. Otherwise, enter "n", and press Enter.
  5. Select the Frosmo Platform regional instance in which your site is hosted. Use the arrow keys to select the correct region, and press Enter.
  6. Provide your personal Graniitti API access token, if you have not already. Press Enter to open your default text editor, paste the token into the editor, save the changes, and exit the editor.
  7. Select your site. Use the up and down arrow keys to scroll the list and select the site you want, and press Enter. You can also filter the site list by typing the site name or origin.
  8. If you want to define a custom name for the site directory, enter the name, and press Enter. If you want to keep the default name, simply press Enter.

If you selected to use HTTPS with the FProxy server, install the SSL certificate for the server on your browser.

Starting the FProxy server

For more detailed instructions on starting the FProxy server, see Starting and stopping the FProxy server.

To start the FProxy server:

  1. In your terminal, run the following command:

    fproxy server start
  2. Copy the URL and port number of the server.
  3. Open your browser, go to your site, and open the Frosmo Debugger by selecting its bookmarklet.
  4. In the Frosmo Debugger, select FProxy.
  5. Enter the URL and port number for the server, click Save, and select Hot reloading.

    Enabling the FProxy server in the Frosmo Debugger

  6. Reload the page, and reopen the Frosmo Debugger. Check that the FProxy server and hot reloading were successfully enabled.

    FProxy server successfully enabled in the Frosmo Debugger

Developing and previewing the site banner content

With your FProxy sites directory set up and the Frosmo Debugger ready to load your local modification content, you can now continue developing the site banner modification.

To create the content for the site banner modification:

  1. Download the modification content from the Frosmo back end:
    1. In your terminal, go to the sites directory.
    2. Download the content for the site banner modification:

      fproxy download <site_directory> <modification_id>
  2. Edit the downloaded modification content:
    1. Open the site banner_rev1_<modification_id>.html file in your source code editor, replace the existing placeholder HTML content with the following code, and save the file. Do not change the style element.

      <div class="frosmo">
          <p>My Banner</p>
      </div>
      

      You can see the changes automatically updated to the page.

      Hot-reloaded changes in the site banner modification

    2. Open the site banner_rev1_<modification_id>.0.css file in your source code editor, replace the existing placeholder CSS content with the following code, and save the file.

      div.frosmo {
          background: #ffa415;
          text-align: center;
      }
      
      div.frosmo > p {
          color: #ffffff;
          display: inline-block;
          font-family: "Source Sans Pro", sans-serif;
          font-size: 20px;
          line-height: normal;
          margin: 20px;
          text-transform: uppercase;
      }
      

      You can again see the changes automatically updated to the page.

      Hot-reloaded changes in the site banner modification

    3. Feel free to further edit the content and see how your changes get hot-reloaded to the page.
  3. After you're done editing the content, upload the content back to the Frosmo back end:

    1. In your terminal, go to the sites directory.
    2. Upload the content for the site banner modification:

      fproxy upload <site_directory> <modification_id>

    If you now open the modification settings in the Frosmo Control Panel, you can see your local changes saved to the variation 1 content.

    Final uploaded content for the site banner modification

  4. Stop the FProxy server:
    1. In the Frosmo Debugger, select FProxy, and click Disable.

      Disabling the FProxy server in the Frosmo Debugger

    2. In your terminal, run the following command:

      fproxy server stop

You have finished the site banner modification, and you've completed this example. For more information about how to deactivate, remove, and otherwise manage the modification, see Working with modifications and Test mode.

  • No labels