Ghost comes with a built-in integration for Google AMP which generates lightweight versions of their content for a faster and smoother user experience

Since one key restriction of AMP is no client-side scripts, you should paste a little code in a file in order to enable tracking with Ghostboard in the AMP version of your Ghost blog. Don't worry, it's pretty easy but we can not do it for you

How to enable Ghostboard tracking on AMP ⚡️

1. Login into your Ghosboard account > Settings > Plan > AMP Tracking Code > View Code, then copy it
2. Open your blog file at /core/frontend/apps/amp/lib/views/amp.hbs
3. At the bottom of the file, paste your AMP Tracking code within the <footer></footer> tags and save the file

💡 Copy this file and paste it to the root folder of the theme, this may minimize the impact of the next release of Ghost

Example of how to paste it

This is the <footer> section from the original amp.hbs file before change anything:

<footer class="page-footer">
    {{#if @site.icon}}
        <amp-img class="site-icon" src="{{img_url @site.icon absolute="true"}}" width="50" height="50" layout="fixed"></amp-img>
    {{/if}}
    <h3>{{@site.title}}</h3>
    {{#if @site.description}}
        <p>{{@site.description}}</p>
    {{/if}}
    <p><a href="{{@site.url}}">Read more posts →</a></p>
    <a class="powered" href="https://ghost.org" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 156"><g fill="none" fill-rule="evenodd"><rect fill="#15212B" width="156" height="156" rx="27"/><g transform="translate(36 36)" fill="#F6F8FA"><path d="M0 71.007A4.004 4.004 0 014 67h26a4 4 0 014 4.007v8.986A4.004 4.004 0 0130 84H4a4 4 0 01-4-4.007v-8.986zM50 71.007A4.004 4.004 0 0154 67h26a4 4 0 014 4.007v8.986A4.004 4.004 0 0180 84H54a4 4 0 01-4-4.007v-8.986z"/><rect y="34" width="84" height="17" rx="4"/><path d="M0 4.007A4.007 4.007 0 014.007 0h41.986A4.003 4.003 0 0150 4.007v8.986A4.007 4.007 0 0145.993 17H4.007A4.003 4.003 0 010 12.993V4.007z"/><rect x="67" width="17" height="17" rx="4"/></g></g></svg> Published with Ghost</a>
</footer>

You can paste the AMP tracking code at the beginning or at the end inside the footer block, the position does not matter, it will be invisible anyway.

Let's paste it at the beginning:

<footer class="page-footer">
    <amp-img src="https://api.ghostboard.io/noscript/<HERE_YOUR_ID>/pixel.gif" width="0" height="0" alt="" />
    {{#if @site.icon}}
        <amp-img class="site-icon" src="{{img_url @site.icon absolute="true"}}" width="50" height="50" layout="fixed"></amp-img>
    {{/if}}
    <h3>{{@site.title}}</h3>
    {{#if @site.description}}
        <p>{{@site.description}}</p>
    {{/if}}
    <p><a href="{{@site.url}}">Read more posts →</a></p>
    <a class="powered" href="https://ghost.org" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 156"><g fill="none" fill-rule="evenodd"><rect fill="#15212B" width="156" height="156" rx="27"/><g transform="translate(36 36)" fill="#F6F8FA"><path d="M0 71.007A4.004 4.004 0 014 67h26a4 4 0 014 4.007v8.986A4.004 4.004 0 0130 84H4a4 4 0 01-4-4.007v-8.986zM50 71.007A4.004 4.004 0 0154 67h26a4 4 0 014 4.007v8.986A4.004 4.004 0 0180 84H54a4 4 0 01-4-4.007v-8.986z"/><rect y="34" width="84" height="17" rx="4"/><path d="M0 4.007A4.007 4.007 0 014.007 0h41.986A4.003 4.003 0 0150 4.007v8.986A4.007 4.007 0 0145.993 17H4.007A4.003 4.003 0 010 12.993V4.007z"/><rect x="67" width="17" height="17" rx="4"/></g></g></svg> Published with Ghost</a>
</footer>

Done! Don't forget to save the file 🤓

Read the Ghost documentation about AMP

Write your Ghost blog success 🚀

Give a try to Ghostboard without any risk: start now your 14 days free trial without a credit card, check it out by yourself 🙂

Happy to help you and answer any question, tweet us, or contact us in your dashboard! 👋