目次
This guide is aimed at individuals utilizing Google AdSense for automated advertisements on sites powered by Ghost CMS.
If you would like to know how to set up AMP Auto Ads, please see this article.
Yasunobu Sakashita
The steps outlined in this article pertain to situations where a common theme is being used. If you're using a specialized theme or a custom-made one, you might need to adjust the code according to your environment.
The ability to upload themes is restricted to Ghost users with a Creator plan or higher. Visit the following link for more details: https://ghost.org/pricing/
While self-hosting is an option, upgrading your Ghost plan could be more cost-effective considering factors such as the expenses related to content delivery via CDN. Additionally, it's recommended to upload the Ads.txt file when using Google AdSense. This upload requires the theme upload functionality. Therefore, even for smaller blogs aspiring to recoup blogging expenses through Google AdSense and similar advertisements, the Creator plan is recommended. If your aim is to cover all costs through revenue from paid memberships and not rely on ads like Google AdSense, the Starter plan might also be suitable.
Learn more about Ads.txt here: https://support.google.com/adsense/answer/12171612?hl=en
Obtaining the Code for Google AdSense Auto Ads
Go to https://adsense.google.com/start/ and navigate to Ads, Site, and Get Code to obtain the code for auto ads.
The auto ads code will resemble the following. For privacy reasons, src=# is used.
<script async src="#"
crossorigin="anonymous"></script>
Downloading the Theme
Log in to your Ghost Admin site, go to Settings, Design, and then Change Theme. Click Advanced, and after clicking the ... button, you'll see the Download button. Download the theme you are currently using or the one you wish to use.
Extracting the Theme
Once you've downloaded the theme, extract it to a location of your choice. It's preferable to use a folder that's easy to work with.
Find default.hbs
After downloading and extracting the theme, locate the file named default.hbs.
Once you've found the file, open it to proceed to the next step.
Edit default.hbs: Identifying the Section
Once you've found the file, look for the <head>...</head> section.
For instance, in the initial theme like Casper, it looks like this:
<head>
{{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
<title>{{meta_title}}</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{!-- Preload scripts --}}
<link rel="preload" as="style" href="{{asset "built/screen.css"}}" />
<link rel="preload" as="script" href="{{asset "built/casper.js"}}" />
{{!-- Theme assets - use the {asset} helper to reference styles & scripts,
this will take care of caching and cache-busting automatically --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
{{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
it should always be the last tag before the closing head tag --}}
{{ghost_head}}
<!-- WRITE GOOGLE ADSENSE CODE HERE -->
<!-- GOOGLE ADSENSE CODE ENDS HERE -->
</head>
For another theme like Edition, it might appear as follows:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{meta_title}}</title>
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
{{ghost_head}}
<!-- WRITE GOOGLE ADSENSE CODE HERE -->
<!-- GOOGLE ADSENSE CODE ENDS HERE -->
</head>
In essence, you need to find the <head>...</head> section in any theme.
Once you've located the <head> tag (i.e., <head>...</head>), proceed to insert the advertisement code underneath it. In other words, you should insert the code in the following location:
<!-- WRITE GOOGLE ADSENSE CODE HERE -->
<!-- GOOGLE ADSENSE CODE ENDS HERE -->
Casper
<head>
{{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
<title>{{meta_title}}</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{!-- Preload scripts --}}
<link rel="preload" as="style" href="{{asset "built/screen.css"}}" />
<link rel="preload" as="script" href="{{asset "built/casper.js"}}" />
{{!-- Theme assets - use the {asset} helper to reference styles & scripts,
this will take care of caching and cache-busting automatically --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
{{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
it should always be the last tag before the closing head tag --}}
{{ghost_head}}
<!-- WRITE GOOGLE ADSENSE CODE HERE -->
<!-- GOOGLE ADSENSE CODE ENDS HERE -->
</head>
Edition
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{meta_title}}</title>
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
{{ghost_head}}
<!-- WRITE GOOGLE ADSENSE CODE HERE -->
<!-- GOOGLE ADSENSE CODE ENDS HERE -->
</head>
Hiding Ads for Paid Members
<!-- WRITE YOUR GOOGLE ADSENSE CODE HERE -->
{{#unless @member.paid}}
<script async src="#"
crossorigin="anonymous"></script>
{{/unless}}
<!-- GOOGLE ADSENSE CODE ENDS HERE -->
Hiding Ads for All Members (Both Free and Paid)
<!-- WRITE YOUR GOOGLE ADSENSE CODE HERE -->
{{#unless @member}}
<script async src="#"
crossorigin="anonymous"></script>
{{/unless}}
<!-- GOOGLE ADSENSE CODE ENDS HERE -->
Compressing the Theme into a Zip File
Once you've finished editing default.hbs, compress the theme folder into a .zip file.
Uploading the Theme
Log in to your Ghost Admin site, go to Settings, Design, and then Change Theme. Click Upload Theme and upload the .zip file you created in the previous step.
Confirmation
Ensure that your site is functioning correctly.
That concludes the process.
Extra: Explanation of the code
The code used in this article is simple.
It is a conditional branch using the negation of a conditional expression using {{#unless}}... {/unless} is a conditional branch using negation of a conditional expression.
For further information, please refer to the following sites and others
