Hello,
Thanks for the newest version of Streamlit 0.63 with the new feature of components, now I can insert javascript by components.html. However, After I insert the Google Adsense code using components.html, it only shows the blank at the position without loading any ads.
I tried just adding the code directly to the streamlit static page (index.html inside the package), and the ads showed up. So I think there should be a way to insert by component.
Any ideas?
Thanks,
Vincent
I would guess youâre running into this issue:
Streamlit Components each run in their own iframe, to keep them sandboxed from other components. Taking a step back, this is effectively this feature request, which I hope we can find a solution for in the near future
Got it! thanks for your quick reply!!!
I think maybe I can just insert the code directly to the streamlit static index.html. But it will result in a mess (the ads will overlap the streamlit content. Is there a way to do some layout within index.html? For example, make the ads at the footer or header but not overlap with the streamlit content?
You can override some of the layout with a trick we refer to unofficially as the âCSS hackâ
Figure out the selector of the content that is overlapping, and move it elsewhere with CSS
Hi, I think I found a way to integrate google adsense without the hack of index.html
I created a separate html-file with the code of Google Adsense. In my streamlit app I integrated the html-file with
HtmlFile = open(âtest.htmlâ, ârâ, encoding=âutf-8â)
source_code = HtmlFile.read()
print(source_code)
components.html(source_code, height=600)
It worked for me
can you please explain a bit more about that HTML file that contained adsense code ?
my adsense account is saying there is no HTML fileâŚ
Thank you @randyzwitch I have succeeded to place ads on my website (Streamlit).
@Shivam_purbia If you are adding code with components.html, I think you need to choose code from âBy ad unitâ not from âBy siteâ. If you want to ad Ads with âBy siteâ, you need to edit index.html which is explained here. How to add Google Analytics or JS code in a Streamlit app? - #18 by dimalvovs
@tk16 âŚHelloâŚ
CongratsâŚon linking your streamlit-web to adsense.
Meanwhile, I am struggling for https:// custom-domain. com to access x.x.x.x:8501.
Could you please provide me a solution. As adsense requires ssl certification.
Thank YouâŚ
How did you embed ads into the website? I add the following JS snippet to index.html, but the ads do not show up.
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-*******"
crossorigin="anonymous"
></script>
I am wondering whether I can embed google ads without the hack of index.html. I followed the procedure explained here but was not successful.
Here is what I did.
(1) I created a separate html-file with the code of Google Adsense (the code I found in Ads > by ad unit )
(2) Then, I copied the python code suggested by tobefined above and pasted it in my main.py file.
(3) I added my domain as âstreamlitapp.comâ and put my whole URL as a subdomain (b/c putting my whole URL as domain did not work).
(4) Requested review but failed.
I now realize that I may have missed another html code which should go in html âheadâ, but I am not sure⌠Are there two html codes? One going to âheadâ, and the other going to âbodyâ? If so, should I put both codes in my html file?
Google team replied that they rejected b/c my appâs server is down, but the app apparently works well⌠Can someone please help?
sir please let me know if you found solution to this problem
Hello, I am also struggling adding the google adsense in my site. please help
Hello?
If anyone has successfully registered for Edsense, could you tell me how?
Hope fully this can help you
@Techie_Tech_Place excuse me, can i join streamlit discord server?