目次
In this article, we'll discuss managing ads using Ghost CMS and configuring AMP Auto ads from Google AdSense. Note that we use src=# for privacy reasons, but in your actual environment, please replace it with the appropriate values.
Obtaining AMP Auto Ads Code from AdSense
First, obtain the code required for inserting AMP auto ads.
Locating or Creating amp.hbs
If you've downloaded a theme, look for the amp.hbs file within the theme's files. Keep in mind that many themes might not have this file by default.
As mentioned below, Ghost templates can be customized, allowing you to create your own amp.hbs file.
Customise the template with your own styles
AMP in Ghost can be styled to suit your brand and theme too! Since the Ghost theme layer is entirely customisable, that means you can also customise the way your AMP pages are rendered by including a custom amp.hbs template file in your theme.
To access any post rendered using the amp.hbs template on your site, add /amp/ to the end of any post URL on your publication. The parent post also has a canonical link to its AMP equivalent.
For the purpose of this article, we'll use the default amp.hbs from GitHub.
TryGhostAccording to the documentation, the template structure is as follows:
.
├── /assets
| └── /css
| ├── screen.css
| ├── /fonts
| ├── /images
| ├── /js
├── default.hbs
├── index.hbs [required]
└── post.hbs [required]
└── amp.hbs [optional]
└── package.json [required]
Editing amp.hbs and Inserting AMP Auto Ads Code
Google AdSense provides instructions as follows:
Step 1: Copy and paste the script between the tags of your site
Place this code once between the head tags of your AMP site's HTML. This script loads the relevant amp-auto-ads library.
Let's follow the instructions accordingly. The code for loading ads is a low-priority operation within the <head>...</head> section. Therefore, I suggest placing it just before the </head> tag.
Step 2: Copy and paste the AMP Auto Ads code immediately after the tag of your page.
Copy and paste this code immediately after the opening tag on the pages where you want ads to appear. Note that the ads will not appear where the code is pasted.
In the default amp.hbs I use, the <body>...</body> section immediately follows <head>...</head>. This means you only need to add the code before and after </head>.
Now, let's proceed to write the actual code.
Don't worry, it's just a matter of copy-pasting, so it's quite straightforward.
Here's the code before editing:
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
<body class="amp-template">
{{#post}}
<header class="page-header">
...
And here's the code after editing (the final form of the code):
See the next section for the completed code.
Final Version
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<script async custom-element="amp-auto-ads"
src="#">
</script>
{{/unless}}
<body class="amp-template">
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<amp-auto-ads type="adsense"
data-ad-client="#"">
</amp-auto-ads>
{{/unless}}
{{#post}}
<header class="page-header">
...
Reviewing the Changes
In Step 1, you'll acquire code similar to this:
<script async custom-element="amp-auto-ads"
src="#">
</script>
After adding this code, it will look like this:
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start
8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<script async custom-element="amp-auto-ads"
src="#">
</script>
{{/unless}}
<body class="amp-template">
{{#post}}
<header class="page-header">
...
For Step 2, you'll get code like this:
<amp-auto-ads type="adsense"
data-ad-client="#">
</amp-auto-ads>
The resulting code, after adding Step 2's code, will be like this:
This exactly matches the Final Version code provided earlier.
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<script async custom-element="amp-auto-ads"
src="#">
</script>
{{/unless}}
<body class="amp-template">
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<amp-auto-ads type="adsense"
data-ad-client="#"">
</amp-auto-ads>
{{/unless}}
{{#post}}
<header class="page-header">
...
Not Displaying Ads for Paid Members
This code is exactly the same as the provided final version code.
For confirmation, I'm presenting it again here:
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<script async custom-element="amp-auto-ads"
src="#">
</script>
{{/unless}}
<body class="amp-template">
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<amp-auto-ads type="adsense"
data-ad-client="#"">
</amp-auto-ads>
{{/unless}}
{{#post}}
<header class="page-header">
...
Not Displaying Ads for Any Member (Free or Paid)
In essence, you just need to replace {{#unless @member.paid}} with {{/unless @member}}.
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
{{#unless @member}}
{{!-- Free member, or not logged in (not a member) --}}
<script async custom-element="amp-auto-ads"
src="#">
</script>
{{/unless}}
<body class="amp-template">
{{
#unless @member}}
{{!-- Free member, or not logged in (not a member) --}}
<amp-auto-ads type="adsense"
data-ad-client="#"">
</amp-auto-ads>
{{/unless}}
{{#post}}
<header class="page-header">
...
Compressing the Theme into a ZIP Archive
Once you've finished editing amp.hbs, compress your theme folder into a ZIP archive.
Uploading the Theme
Log in to your Ghost Admin site, navigate to Settings, then Design, and click on Change Theme. Click Upload Theme and upload the ZIP file you created in the Compressing the Theme into a ZIP Archive section.
Verification
Check if your site is functioning correctly.
That's it, you're done!
