Search code examples
angulardartcomponentsadsenseangular-dart

Cannot put ads into my Angular Dart app

I'm trying to put google AdSense ads into my Angular Dart app. But if I paste it into the html of one of my components it doesn't show anything.

dashboard_component.html:

<head>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({
        google_ad_client: "ca-pub-7364276574790830",
        enable_page_level_ads: true
        });
    </script>
</head>
Solution

  • Script tags added to components templates are purged by Angular for security reasons.

    You need to add the script tag to index.html.

    You can also add the script tag using imperative Dart code at runtime, for example in a lifecycle callback of an Angular component for example like I explain in script tag in angular2 template / hook when template dom is loaded for TypeScript (should be easy to translate to Dart. recent Angular Dart versions don't have nativeElement anymore).

    In a similar situation I added a unique attribute to the script tag and then used querySelector to check if such a script tag already exists to avoid adding it multiple times.

    A script tag also has a load event that notifies when the script was loaded, so your code can wait for that before calling functions that are only available after the script was loaded.