How to add javascript code from Adsense into Dash app?

Dash Python
1

Hi!
Which is the correct way to add this javasript code from Adsense into a Dash app?

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Homepage Leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

I was testing html.Script() without exit. :confounded:

Thank you

2

:sweat: 
you can try

app.scripts.append_script({
“external_url”: my_js_url
})

or 
 create your own dash core conponent

2 Likes
3

app.scripts.append_script is the right approach here. I’ve used this with google analytics before and it works. See https://plot.ly/dash/external-resources for more.

2 Likes
4

app.scripts.append_script seems that works fine for scripts that runs just at the beginning, but I can’t get running just the adsense one.
Will html.Script work sometime? I think with that component I will be able to place it on the app layout easily and will be visible.

Thanks for the help

2 Likes
5

Hi, I’m interested, how would it be an example for google analytics tracking code, I tried using

app.scripts.append_script({
“external_url”: my_js_url
})

Without any luck, thanks!

6

By using this service and app.scripts.append_script I think it will do the job

3 Likes
7

Sorry, you are right, I needed to use rawgit.com instead, thanks! sorry about the silly question!

1 Like
8

Hello @pabjusae,
I’m also trying to add an Adsense to my dash app.

my_js_url = 'http://www.mysite.com/static/adsense.js'
app.scripts.append_script({
    "external_url": my_js_url
})

But that did work :confused:
Did you make something else ?

Thanks

9

I have not managed to make it work yet. :frowning_face:

10

For whoever is having issues, could you paste a screenshot of the network tab of your browser displaying the request?

My guess is that the server that is serving the adsense.js code isn’t setting the correct content-type (it should be text/javascript) and so the script isn’t getting executed. This is why @Sherm4nLC’s solution of using rawgit.com to serve the file (f it is hosted on gist or github) worked.

1 Like
11

02
Capture d’écran 2017-09-26 Ă  17.58.02.png1358×555 100 KB

Hello @chriddyp
Thank you for you answer.
Here can you find the screenshot where the AdSense script is executed.

Thanks

12

I’m having problems in adding the analytics.js
The following code is working, referring to an external url provided by rawgit.com:

app.scripts.append_script({
    "external_url": my_js_url
})

Maybe the problem is that script is being appended to the footer of the page, not the Head.
Is there a way to append_script to the head?

Tks

2 Likes
13

I tried this to add <script> within <head>

app.index_string = """<!DOCTYPE html>
<html>
    <head>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=xxxxxxxxxxxx"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'xxxxxxxxxxxx');
        </script>
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=yyyyyyyyyyyyyyy"
     crossorigin="anonymous"></script>        
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
    </head>
    <body>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
    </body>
</html>"""

Google Analytics works, but AdSense doesn’t. Does anyone know how to fix this?

14

USE THIS METHOD

server = Flask(__name__)
app = dash.Dash(
    __name__,
    server = server
    ,external_stylesheets=["https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css"]
)

or using visdcc.run_js