This article introduces the GSC Inline Editor and discusses its features and functionality for marketing users and other less-technical content creators.
Table of Contents
- Create a Campaign
- Enter a URL
- Basic Campaign Information
- Campaign Type
- Find the Selector
- Default Content & Campaign Dimensions
- Complete & Save Your Campaign
- Next Steps
- Adding Rules
- Editing a Campaign
- HTML Content
- Inline Editor
- Responsive View
If you want to make quick personalization changes without intimate knowledge of your page's HTML and CSS selectors, then the new interactive Editor should be part of your Smart Content workflow.
Note: The inline Editor is a beta feature and is only available to some users during this initial release. If you are interested in using a WYSIWYG wizard to configure new campaigns, please contact your Customer Success Manager to discuss the benefits and limitations of enabling this feature for your account.
The Editor allows you to configure a Campaign and Content directly in the context of your page, rather than using the form fields of the current interface. Think of the Editor as "easy mode," allowing you to modify your page like any other WYSIWYG editor, while the traditional form-based UI allows for more "advanced mode" tweaks. It's just a new way to create and configure a Campaign and its default Content within a step-by-step wizard workflow. You will still use the traditional interface to create and modify Segments, Rules, and additional Content for a given Campaign location.
You specify the URL of the page you want to modify, and we will load that page into an iframe. From there, you can select the Campaign location with a point and click, simplifying the task of identifying a valid selector. You may also create new content dynamically or make changes directly to content on the page, viewing the effect of those changes in real time.
Create a Campaign
To get started, click the green "New Campaign (Editor)" button at the upper right of the Campaigns list view.
Note: The button will only be visible if your Customer Success Manager has enabled access to the Editor for your account. If you do not see the button, then please contact your CSM or firstname.lastname@example.org to request access to this beta feature.
Enter a URL
The first step in your new Campaign is to enter the URL of the page you intend to personalize. When you click Go, the editor will attempt to load the page in an iframe, displaying it exactly as it appears to end users.
For best results, we recommend using the secure https:// protocol to load all pages, if possible. Most modern browsers will prevent non-secure scripts from being loaded within the secure GSC admin page, which may result in a limited experience that doesn't display all of your page content correctly.
Also note that the Editor does not currently support pages that require a login to access them, nor pages that redirect to another page (just enter the final URL post-redirect in that case). You will see an error message at the top of the Editor when you enter a URL that could not be loaded or tries to redirect.
Basic Campaign Information
Once your site loads, it will appear in the Editor behind a gray mask. Give your new Campaign a unique and relevant name that describes its location and purpose. The description field is optional, as is your choice to enable the Campaign at this time. Once you have entered at least a name, you may click Next to continue.
If your site loads incorrectly within the Editor frame (which usually manifests as styles and scripts that are not applied as expected), there is a good chance that your browser is blocking mixed (non-secure) content by default. The steps to enable mixed content on a given page differ by browser, but you should be able to avoid the problem altogether by simply loading your page by https instead of http.
The next step is to choose a Campaign type. There are two primary categories of Campaign:
- Overlay - These types (modal, banner, and fly-in) do not modify the page content in any way. They are added as new objects that may appear above, below, or layered on top of the existing page. With an overlay campaign type, there is no need to identify a selector. In this case, the WYSIWYG Editor is most useful for creating simple overlay content (e.g., image modals) and checking its appearance as you work.
- Embed - If you want to add or change content within the page itself, then choose the Embed campaign type and then choose a selector in the next step to identify the specific location on the page that your campaign will modify. The ability to point and click to choose a selector is one of the most helpful features of the Editor.
Note: The next steps will apply only to embed style campaigns. For additional details regarding overlay types and their available configuration options, see these related articles:
- What, Why, and How: Modal Campaign Type
- What, Why, and How: Fly-In Campaign Type
- How to Create a Banner Campaign
Find the Selector
If you intend to modify your existing content or add new content to an empty location on your page, then choose the Embed campaign type and click the Next button. The grey mask will disappear, and you can now scroll through your page and click the location that you want to change or replace. If you know the class name, ID, or other identifier of the target element, then you can use the manual search box to locate it that way.
Once you have selected an element, a blue mask will appear over it, and its unique selector value will appear in a list of elements on the left hand configuration panel. This list will also include up to 3 ancestor elements above it and any child nodes (contained within the element you clicked) below it. This allows you to precisely select the intended parent container of your new content.
Note: If you select an object that cannot contain other HTML elements (e.g., the image <img> tag), the selector tool will automatically highlight its parent for you.
Once you have chosen a valid selector, you may click Next to proceed.
Default Content & Campaign Dimensions
After you have defined the selector or chosen any non-Embed campaign type, you will have the opportunity to add default content and to set campaign dimensions.
If you are creating an Embed campaign type, you will see your selected element and current content surrounded by a blue dashed line to show you the element's boundaries and current size.
For overlay campaigns, you will see a preview of the modal, banner, or fly-in with placeholder content. Your selected element or overlay campaign object will change in real time as you adjust its settings.
Note: The initial dimensions for an Embed style campaign will be the calculated height and width of the chosen selector. Each other type has its own default values. Depending on your content, you may get better results by choosing inherit, auto, or some other relative dimensions from the units dropdown. See this article for further discussion of content dimensions and units.
Default Content is an important part of every campaign for a few reasons:
- It defines the content (if any) that a visitor will see if they do not match any of your defined segments and campaign rules.
- By storing and serving default content through your GSC implementation rather than just leaving your existing content as-is, we are able to track engagements with that default content and compare it to click rates of your personalized content for the same campaign.
- The default content is served with the main GSC JS library and campaign definitions, which ensures that some content will always be shown, even in the unlikely event of a slow or failed connection to our separate content serving API.
We recommend leaving Default Content enabled for all Embed style campaigns. If you have an existing piece of content you'd like to use for your new campaign, you may select that from the Default Content dropdown menu. Otherwise, click the link to create new content.
When you have finished configuring your new default content, click the link at the bottom to add "basic info and finalize." At the least, a unique name is required. We recommend adding a useful description and tags to help with organizing your content library. Then, click "Save Content" to add the content module to your Content Library.
Complete and Save Your Campaign
In the last step of the inline campaign wizard, you may confirm the campaign location as configured and add any additional locations if necessary. If everything looks good, then click "Save Campaign" to complete the process and add your new campaign to the Campaign Library.
After you have created your new Campaign, you may click the fork icon to manage the campaign's rules. Rules allow you to define the conditions under which your personalized content is shown to audience segments that you specify. See this article for more details on creating and managing campaign rules.
Editing a Campaign
Campaigns that were created using the interactive Editor wizard can be identified in the library by the presence of a task icon:
Note: Campaigns which were created using the traditional form method cannot be modified with the interactive Editor. The task icon will not be available for these campaigns.
Click the pencil icon to edit it in regular form view, or click the task icon to open the Editor wizard view. You may then step through the wizard process again, making any necessary changes to campaign settings or default content that you created previously using the Editor. When you are finished, click Next until you reach the final step, and click Save Campaign to apply your changes.
Creating Additional Content with the Editor
While you can only apply a campaign's Default Content using the interactive Editor, you can also use its content creation tools to create new modules for your Content Library. This can be particularly helpful when you need to create new inline content without the need for HTML editing expertise.
First, identify a campaign with the task icon (see above) and click it to open the Editor. Step through the campaign settings, leaving everything as-is. In the Default Content step, click the link to "Create new content."
If you are designing an image-based modal or fly-in, or if your embedded campaign location currently contains just an image that you intend to replace, then the content creation form will be very straightforward. Just upload that image or provide the self-hosted URL to create your new content module. If, however, you want to make changes to text or the underlying source code of a page, then the Editor's WYSIWYG content creation tools prove particularly useful.
You don't need to be a code expert to make meaningful changes to your page. Just choose the "Inline Editor" option from the New Content Type menu to access a toolset for basic text editing, image embedding, and link creation. Your changes using the Inline Editor are visible on the page immediately to help you style your content exactly as you need it.
At any time, you can preview the appearance and layout of your page with the new content in place by clicking one of the screen size toggle buttons at the top right of the Editor. If the rest of your page is designed with a responsive layout, then you will see how your content looks on mobile, tablet, laptop, and desktop screens.
As with your default content in previous steps, you should add some basic information describing your new content and then click Save Content. The new piece of content will be added to your Content Library.
Note: When you create new content using the Campaign Editor, it will automatically be swapped as the campaign's Default Content. If you haven't made any other changes to your campaign, then just click Cancel to return to the Campaign Library (your new content will still be saved). If you need to save other changes to your campaign, then just be sure to use the dropdown content selector to restore your intended Default Content from the library before saving.
Your new content is now available for use in any Rule on your site.