@frontity/smart-adserver
package will load a third-party Smart Adserver library which adds certain properties on the global window
object. Then you as the developer can render the exposed <SmartAd>
component, which will use those properties to make the "ad call" (which are basically API calls to the Smart Adserver).<SmartAd>
component was rendered.<Head>
that loads the Smart Adserver library. When the user adds the @frontity/smart-adserver
to their frontity.settings.js
file, this library will be loaded automatically.SmartAd
component. This component is exposed in libraries.fills.SmartAdserver.SmartAd
. The users can just use this component directly to display ads by passing it relevant props. The component takes care of calling the Smart Adserver API and injecting the ad into the DOM in the relevant placefills
in the frontity.settings.js
file. Ads can be placed in specific slots in a theme by using that approach.frontity.settings.js
file as one of the packages that will be part of your Frontity project.smartAdserver
. To use the Slot and Fill pattern with this package we should add a settings object to state.fills
under the smartAdserver
namespace.smartAdserver
namespace is an object which should be assigned to an arbitrarily named key. The structure should be as follows:slot
library
"smartAdserver.SmartAd"
(SmartAd
component available in the smartAdserver
package).priority
props
<Slot>
component (see table below)props
property<Slot>
component.siteId
pageId
formatId
callType
iframe
or std
tagId
id
of the container that will contain the ad. Default Value: sas_${formatId}"
width
iframe
.height
iframe
.minHeight
std
.css
css
prop. They will be merged with the default styles of the SmartAd component. more infoβtarget
Slot & Fill
patternstate.fills.smartAdserver
namespace in frontity.settings.js
as explained above.libraries
, you can get the SmartAd
component from libraries
and render it wherever you wish.