Comment on page
@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.Add the
google-ad-manager package to your project:npm i @frontity/google-ad-manager
This package can be included in your
frontity.settings.js file as one of the packages that will be part of your Frontity project.Each fill in the
googleAdManager namespace is an object which should be assigned to an arbitrarily named key. The structure should be as follows:export default {
packages: [
{
name: "@frontity/google-ad-manager",
state: {
fills: {
googleAdManager: {
arbitrary_fill_name: {
// Object properties
},
},
},
},
},
],
};
Name | Type | Required | Description |
slot | string | yes | The name of the slot as defined in your theme where you want the ad to go. |
library | string | yes | The React component used to display the Ad. We can set this value to "googleAdManager.GooglePublisherTag" (GooglePublisherTag component available in the googleAdManager package). |
priority | int | no | Assigns a priority in case more than one fill is assigned to that slot. |
props | obj | yes | Props that will be passed to the <Slot> component (see table below) |
An object with props that will be passed to the
<Slot> component.Name | Type | Required | Description |
id | string | yes | An id for Ad, used to generate the ID the <div> container will use. |
unit | string | yes | |
size | object | yes | An array of integer values to specify the width and height (in pixels) to display the ad. |
targeting | object | no | |
data | object | no | Data object representing a link, passed automatically if the component is rendered by a slot. |
Example with one ad:
export default {
packages: [
{
name: "@frontity/google-ad-manager",
state: {
fills: {
googleAdManager: {
belowHeaderAd: {
slot: "Below Header",
library: "googleAdManager.GooglePublisherTag",
priority: 5,
props: {
id: "div-gpt-below-header",
unit: "/6499/example/banner",
size: [320, 100],
},
},
},
},
},
},
],
};
If you need to add more than one ad you can give each object in the
state.fills.googleAdManager object it's own key:export default {
packages: [
{
name: "@frontity/google-ad-manager",
state: {
fills: {
googleAdManager: {
belowHeaderAd: {
slot: "Below Header",
library: "googleAdManager.GooglePublisherTag",
priority: 5,
props: {
id: "div-gpt-below-header",
unit: "/6499/example/banner",
size: [320, 100],
},
},
belowContentAd: {
slot: "Below Content",
library: "googleAdManager.GooglePublisherTag",
priority: 5,
props: {
id: "div-gpt-below-content",
unit: "/6499/example/banner",
size: [300, 600],
targeting: {
interests: ["sports", "music", "movies"],
},
},
},
},
},
},
},
],
};
The 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.
import { Slot, ... } from "frontity";
const MyComponent = () => {
return (
<>
...
<Slot name="Below Header" />
...
<Slot name="Below Content" />
...
</>
);
};
...
export default MyComponent;
Alternatively, since the Ad component is exposed in
libraries, you can get the GooglePublisherTag component from libraries and render it wherever you wish.const MyComponent = ({ libraries }) => {
const MyAd = libraries.fills.googleAdManager.GooglePublisherTag;
return (
<MyAd
unit="/unit/234"
size={[300, 600]}
/>
);
};
export connect(MyComponent);
This short video demonstrates the usage of the
@frontity/google-ad-manager package.Last modified 2yr ago