Ad packages

Description

Some Frontity users would want to show ads in their sites. It has to be as simple as installing the specific package that integrates with the ad provider of choice (e.g. AdSense, DoubleClick, SmartAds, etc.) and configuring the ads in frontity.settings.js in order to make them appear in a specific slot (see Slot and Fill).

General settings related to a specific ad package would be in the state, under its respective namespace.

Also, any Ad component could be imported from libraries or from the package and rendered in any place.

UserStories

As a Frontity user
I want to install and configure an ad package
so that I can show ads from an specific provider in a site, without coding.

As a Frontity user
I want to create fills (see Slot and Fill) with ad components
so that I can show ads in specific slots of a Frontity theme.

As a Frontity user
I want to create fills (see Slot and Fill) with ad components using assertions
so that I can show ads in specific slots and under certain conditions (e.g. only in posts).

As a Frontity user
I want to import and use an Ad component
so that I can show ads in my own theme wherever I want, without using fills.

Possible solution

Any ad package should expose the Ad component in libraries, under a specific namespace (e.g. adSense.libraries.Ad), or following the rules decided on Slot and Fill.

Apart from that, the implementation of each package would be limited to the specific Ad component and the integration with the ad provider.

Great work :slight_smile:

Do you think it makes sense to open specific Feature Discussions for each of the platforms? Like AdSense, DoubleClick and SmartAds. And document the specific settings needed for each one? Global settings like networkId, publisher-id and so on, individual settings like slotId, format and so on and the scripts and assets needed.

Indeed, I’ll be working on that today.

At first I thought to keep all the ad packages in the same FD, but it makes more sense for our development process to create a FD for each one as they could be implemented separately.

I’m going to close this one. Thanks @david.

For future reference, this are the FD opened by David:

There’s going to be another one for Adsense in the near future.

1 Like

I don’t know if I’m messing it up by reopening the thread, if so, I’m sorry. I just wanted to inform you that maybe we should pay attention to the compatibility with the Googlesitekit plugin, https://sitekit.withgoogle.com/, now it brings the AdSense AutoADs ads integrated; https://support.google.com/adsense/answer/9261307?hl=en where it is not necessary to look for gaps for the ads, just put a line of js

Absolutely not, don’t worry.

That’s interesting. Maybe in that case, you don’t need the Frontity package at all. Does Site Kit provide a block to insert the ads? Or how does it work?

Sitekit provides everything, Google Analytics, Search Console, Page Speed and AdSense AutoADS, actually the AutoADs is just a line of code like this: –

<script
  async
  data-ad-client="ca-pub-2523307345324148497"
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  >
</script>

If it behaves well even in a SPA, it would be as simple as adding that line of code in your theme. :thinking:

If someone wants to try I offer my blog as a guinea pig and I give them access to my installation to put the JS, I have no idea how to do it.

Hmm… I think we are not passing the props to the element we create for the script so this won’t work because the data-ad-client attribute will be missing.

I have opened an issue: https://github.com/frontity/frontity/issues/607

In my case I already put the js in the head and the automatic ads are already coming out, the income has fallen a lot but I think it is because I do not have the ads.txt because the page views in the adsense reports are more or less like before

1 Like