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.
To create a new slot:
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.
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.
Click Manual Slot in the menu. The Create New Slot dialog box displays.
Provide the following information in the slot creation form:
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.
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:
div
correctly.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.
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
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.
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. |
If you must make changes to the slot, you can edit the slot.
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.