A beautiful trap of using JavaScript to render website and placing advertisement
After I solved the error of getting data from MySQL server, the next progress is making my website profit. This was a second time to submit my website since the content is not eligible for hosting ads from AdSense for the first time.
As you can see, this screenshot is actually look like when I submitted to AdSense first time and they rejected unsurprisingly. It only contains navbar, footer, 1 banner and 2 GitHub status which too few content and no one sure what website topic is it. It forced me to add more content including what I do, tweet widgets and donation. After appended the content of my website and send to AdSense second time. However, they still rejected with the same reason of the first time. This make me froze that I have no idea that my website is completed and no placeholder remain.
Meanwhile, when I review another website which the content is fewer than my site but approved by AdSense, I realized that I can’t rely on DOM to load shared content in HTML.
If you read the first story’s PHP source code, it actually export as JavaScript and the shared content including navbar and footer are generated by DOM. Once user visit my site, this PHP will be called and generated JavaScript code to render remaining parts of website. But since JavaScript is a client side, it means my website’s navbar and footer actually is a placeholder when the original home page’s DOM content just loaded. Compare to another website, the shared content is loaded already when the response finished. I believe AdSense will review actual HTML source code of the website to determine is suitable for hosting ads to make profit.
It is the same problem when using Flutter based website since UI is render by JavaScript heavily, Flutter is suitable for building web app, not a website. And React Native and Vue.js may possibility able to host ads if the content is enough before using Webpack. And one more thing that not only render DOM by JavaScript natively, using AJAX to load shared content also caused the same problem.
How to load shared content that make AdSense believe it suitable to hosting ads?
If your website is a dynamic website, sperate the shared content code to specific directory, and import it depending which language or service used like PHP’s include or JSP’s custom tag.
But if your website only allow hosting static website like GitHub page, you can consider make a bunch of content in a single page or copy and paste the code if ok.
(This story contains my opinion only, some information may be differ)
