Information for: DEVELOPERS   PARTNERS

Looking for something?

Creating personalized slots

A slot is an area on your website you configure to display A/B tests, targeted content, or other tests. Use slots with rules to test your visitors’ reactions to customized content, and ensure your marketing strategy works.

You can create slots by either clicking the webpage, manually embedding code, or using CSS selectors.

Creating a new slot

To create a new slot:

  1. Sign in to Personalization as an administrator.
  2. Click Campaigns.
  3. Find the campaign you want to edit, and then click the Edit link.
  4. Click Save and continue to go to the Add or Edit Rules page.
  5. Select Build or Build Experience, depending on your campaign type. The website displays, and the visual builder toolbars display.
  6. Click the New Slot button in the left side of the lower visual builder toolbar.
  7. Click the Point & Click Slot or Manual Slot option from the menu.
Point and click
Manual

The page display changes, and any existing slots on the page are greyed out. Mousing over different elements of the page should highlight those elements.

  1. To turn an element into a slot, click + Create new slot.
  2. Provide the following information in the slot creation form:
    • Slot Name: (Required) A unique name for this slot.
    • Slot Page(s): The relative paths for the pages where the slot appears.
    • The CSS Selector is available for you to use to in your theme to target specific styling for a slot. Change this selector by adding the desired CSS. The highlighting of the slot will change to the new HTML element.
  3. Click Create slot.

Manual slots are slots created when you embed the code for the slot directly into your application, or define a specific CSS selector for the slot.

  1. Click Manual Slot in the menu. The Create New Slot dialog box displays.

  2. Provide the following information in the slot creation form:

    • Slot Name: (Required) A unique name for the slot.
    • Slot Page(s): The relative paths for the pages where the slot appears.

  3. You can use either the Embed code or CSS selector to define the slot.

    If you are planning to use the Embed code, you click the copy-to-clipboard icon to copy the slot embed code.

    If you are planning to define a custom CSS selector, click CSS Selector and enter the selector of your choosing.

  4. Click Create Slot to save the slot.

If a page element has an HTML section which can be edited, you can add an embed code to the element. For example, to add code to a block, complete the following steps:

  1. Add the copied embed code to a block. The block must use the Full HTML format, and you must edit the HTML source code to add the div correctly.
  2. Save the block.
  3. Add the block to the webpage in Full HTML or another trusted format.

The block is now available as a slot for Personalization. The embed code is HTML, and will render in the webpage, but is not visible to the user.

Your new slot is now available for content.

CSS selectors

You can manually enter a webpage element’s CSS selector(s) into the labeled field on a slot card. Personalization can use any selector or group of selectors defined with CSS to define your slot region.

You can enter one or more selectors into the field to define the slot region on the webpage.

The selector or group of selectors entered into the field:

  • must be unique across all the slots on your website.

  • must not belong to a page element whose parent or child element is also a Personalization slot.

  • must target an HTML block-level element on the page, such as:

    • p
    • li
    • div
    • headers (h1, h2, and others)

    Note

    Acquia doesn’t recommend using special-use tags such as image, canvas, video, br, or hr. These tags are too common to work well for slots.

These restrictions ensure slots don’t overlap with each other on your webpage, and help prevent two slots from using the same region of your website.

If your selector matches more than one element, the first matched element will render a slot. An example of a selector group which usable by Personalization:

#first-line div > p

Entering this code into the slot’s CSS Selector field enables Personalization to use a paragraph in a div that uses the ID first-line as a Personalization slot. You can change the CSS selector entered into the field on the slot card at any time, which changes where the slot render on the webpage. Any rules you have created for the slot aren’t affected when you change the slot’s CSS selector.

Slot pages

Define one page per line. Paths may use wildcard definitions.

Path example Description
/ This slot exists on the home or front page of your website.
/* This slot exists on all pages of your website.
/article/* This slot exists on all pages prefixed by /article/ on your website.

Editing or removing a slot

If you must make changes to the slot, you can edit the slot.

  1. Sign in to Personalization.
  2. Click Campaigns.
  3. Find a campaign, and then click Edit.
  4. CLick Save and continue to go to the Add or Edit Rules page.
  5. Click Edit experience for Targeted tests, or Edit for A/B tests.
  6. In the lower visual builder toolbar, click the Number of slots menu.
  7. Select the slot to edit, and then click Edit slot to update the content, or Remove slot to delete the slot.
  8. Click Save & continue when finished.

When you delete a slot, the rules associated with the slot are cleared from the cache.

Note

If a slot has a published or scheduled rule, you can’t delete the slot. You will receive an error message that you can’t perform this action.

53 State Street, 10th Floor
Boston, MA 02109
United States
Phone: 888-922-7842