How can I enable Google Adsense inside streamlit

[Vincent-Cui]

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

[randyzwitch]

I would guess you’re running into this issue:

https://searchengineland.com/google-bans-iframes-for-adsense-though-says-it-will-grant-exceptions-81174#:~:text=Google%20has%20tweaked%20its%20policies,granted%20an%20exception%20by%20Google.

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

Allow arbitrary Javascript code blocks (e.g. Google Analytics)

[Vincent-Cui]

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?

[randyzwitch]

You can override some of the layout with a trick we refer to unofficially as the “CSS hack”

Amend Streamlit's default colourway like on the spacy-streamlit App?

I did something like this the other day and it worked: st.markdown( """ <style> .reportview-container .markdown-text-container { font-family: monospace; } .sidebar .sidebar-content { background-image: linear-gradient(#2e7bcf,#2e7bcf); color: white; } .Widget>label { color: white; font-family: monospace; } [class^="st-b"] { color: white; font-family: monospace; } .st-bb { background-color: transparent; } .st-at { background-color: #0c0080; } footer { …

Figure out the selector of the content that is overlapping, and move it elsewhere with CSS

[tobefined]

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

[Shivam_purbia]

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…

[tk16]

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

[DPunited]

@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…

[giswqs]

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>

[phdsmhong]

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?

[giri_tharan]

sir please let me know if you found solution to this problem

[Stephen_Nidea]

Hello, I am also struggling adding the google adsense in my site. please help

[Gyunald]

Hello?
If anyone has successfully registered for Edsense, could you tell me how?

[Techie_Tech_Place]

Hope fully this can help you

Troubleshooting Websocket Connection Errors in Deployed Streamlit Applications -

[vvv]

@Techie_Tech_Place excuse me, can i join streamlit discord server?