@frontity/google-ad-manager
API reference of `@frontity/google-ad-manager` package
This package enables Frontity to integrate with Google Ad Manager. It allows you to add ads as fills in frontity.settings.js
so that they will appear in a specific slot defined in your theme. See the Slot and Fill documentation for more information.
Table of Contents
Installation
Add the google-ad-manager
package to your project:
Settings
This package can be included in your frontity.settings.js
file as one of the packages that will be part of your Frontity project.
The namespace for this package is googleAdManager
. The object should be added to state.fills
.
Each fill in the googleAdManager
namespace is an object which should be assigned to an arbitrarily named key. The structure should be as follows:
Object properties
The props
property
props
propertyAn object with props that will be passed to the <Slot>
component.
Examples
Example with one ad:
If you need to add more than one ad you can give each object in the state.fills.googleAdManager
object it's own key:
Usage
Using the Slot & Fill
pattern
Slot & Fill
patternThe recommended usage of this component is using the Slot and Fill pattern. The configuration of the fill(s) is done in the state.fills.googleAdManager
namespace in frontity.settings.js
as explained above.
With this configuration we can then insert the Slots representing the Ads in any React component.
Using the Ad component directly
Alternatively, since the Ad component is exposed in libraries
, you can get the GooglePublisherTag
component from libraries
and render it wherever you wish.
Video
This short video demonstrates the usage of the @frontity/google-ad-manager
package.
Last updated