I have written an article and I am not able to add any AdSense script inside my article. And I was thinking about how can I add Google AdSense code snippets into my blog's HTML. As my blog's content is simple HTML, generated by custom-made CMS (Content management system) which was built by me as well. But while creating the content I always focus on content text or images, using that I can demonstrate the purpose of the article. But when I am publishing it, I do need to monetize it as well. Let's see how it was looking like just after creating content.
In the above you can see, the content is written in simple HTML which is actually generated using an editor created by me. The editor has some limitations, I can not include any script tag while creating content. As a result, I can not include the Google AdSense code while creating content. I need to add the code snippets in between two paragraphs by run time. So the content could be seen properly with Google ads.
I want to add Google AdSense code snippets between two paragraphs.
To achieve my goal, I add a simple id with a div tag. While adding the code into the main page template, the code will search the respective id and place the required script tag between two divs.
To call the method, I have used in following way -
const blogDetails = this.injectAdSense(description, 2); Where the first parameter description is the HTML code and data type is String. The second parameter is the number of AdSense id being added into the HTML.
Once you have done the changes, it could look as follows -
Now the most important part of this article is, you need to get In-view and out-view point, where you can inject the script tag programmatically. Whenever the div shows in viewport based on user scroll action, we will load the AdSense script lazily on the viewport.
To get the user scroll action we need to watch window.scroll event. Using angular I am using @HostListener to get the scroll position. Like below
Above method will execute whenever user scroll the page, we are going to validate the id of corrosponding div is in-view or out-view.
The above function will exactly tell you the particular targetted div is in-view or out view, if the id is outside of the view we are going to remove that id. And if it is inside the view we are going to execute the script value. Let's how I am calling the script.
I have created a script loader service, which helps to load external script files. And from angular, I am sending targetted div id, and based on this id it will going to execute the AdSense code snippets.
Also the script loader, you need to pass the path the of external script (js) file. Like below -
You are almost done with setup, only the part remains what is it in ga-lazy.js file and how I am calling the function.
How am I executing the script?
You are ready with setup, now you can deploy the site and you can see the ads are showing the middle of your article as user scroll. If you find this post is useful to you please share and comments below.