Here are three different simple methods to add the Google Adsense code to your Nuxt js web project:
Method 1:
Add to your Nuxt App Template
One of the "little-known" features of Nuxt is the ability to modify the app template. This template is the HTML file used by Nuxt js to generate your app, which makes it perfect for adding global changes to your whole project. Their description of the app template is: You can customize the HTML app template used by Nuxt.js to include scripts or conditional CSS classes.
To change the app template, create an app.html file in your root directory. By default, the app.html file looks like this:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
As you can see, there's some stuff in here you don't want to touch. However, adding Google Adsense to this file is simple and straightforward:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
<script
data-ad-client="ca-pub-################"
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
></script>
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Replace the data-ad-client with your ID and Google Adsense will now be added to your Nuxt project on every route.
Also note: this method can work with other scripts and static content for your web app. For example, rather than add Google fonts through an additional dependency, you could add them to your project globally with this method (just like a regular website!).
Method 2:
Use the @nuxtjs/google-adsense package
You're probably wondering "why isn't this the first method?". Well, it could be. Using this package is about as easy, and you don't have to worry about changes to the app template with future updates etc. However, this dependency hasn't updated in three years, and for something as simple as adding a code snippet to the <head> of your app, I feel this package isn't required.
In any case, here's how to add it to your project:
yarn add @nuxtjs/google-adsense or npm i --save @nuxtjs/google-adsense to install the dependency.
Then, in your nuxt.config.js file:
Once again, working with Nuxt makes this super-easy! Replace the id with your own, and you're good to go.
Method 3:
Add the snippet to your config file
Finally, the last available option is to add the snippet contents into the head section of the nuxt.config.js file. Again, this is straightforward, but it's the least recommended on this list due to it being the most cumbersome (in my opinion). This method is similar to adding it to your app template, but it further clogs up your config file. Furthermore, if the vue-meta dependency changes in future, you may need to change this.
Here is how to add it to your config:
export default {
head: {
script: [
{
src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
'data-ad-client': 'ca-pub-################',
async: true
}
]
}
}
Once again, replace the data-ad-client property.
All three of the above methods are perfectly acceptable for your Nuxt project, so use your preferred method. You'll be up and running in only a few minutes.
No comments:
Post a Comment