Adsense 不适用于 Polymer 设计答案

【问题标题】：Adsense not working with Polymer designAdsense 不适用于 Polymer 设计
【发布时间】：2015-03-16 15:49:37
【问题描述】：

我正在为一个家庭外卖网站构建一个网站，我已经设法让核心设计符合我的需求。我现在在我的网站中显示 adsense 时遇到问题。

我在控制台中收到一条消息

未捕获的错误：adsbygoogle.push()：DOM 中所有 class=adsbygoogle 的 ins 元素中已经有广告。

          </style> 
      <core-drawer-panel transition id="core_drawer_panel" touch-action>
        <section id="section" drawer>
          <core-header-panel mode="standard" id="core_header_panel">
            <core-toolbar id="core_toolbar">
              <div id="div">Menu</div>
            </core-toolbar>
            <section id="section2">
              <core-menu selected="0" id="core_menu">
                  <core-item id="core_item7" icon="home" label="Home" horizontal center layout><a href="../index.html"></a></core-item>
                  <core-submenu id="core_submenu" icon="list" label="Online Menu">
                    <core-item id="core_item" label="Special Offers" horizontal center layout><a href="../menu.html"></a></core-item>
                    <core-item id="core_item" label="Everything" horizontal center layout><a href="../menu.html"></a></core-item>
                  <core-item id="core_item" label="Burgers" horizontal center layout><a href="../menuburgers.html"></a></core-item>
                  <core-item id="core_item1" label="Kebabs" horizontal center layout><a href="../menu.html"></a></core-item>
                  <core-item id="core_item2" label="Doners" horizontal center layout><a href="../menu.html"></a></core-item>
                  <core-item id="core_item3" label="Pizzas" horizontal center layout><a href="../menu.html"></a></core-item>
                </core-submenu>
                <core-item id="core_item4" icon="shopping-cart" label="Deliver to you" horizontal center layout><a href="../delivery.html"></a></core-item>
                <core-item id="core_item5" icon="perm-phone-msg" label="Call us" horizontal center layout><a href="../callus.html"></a></core-item>
                <core-item id="core_item6" icon="file-map" label="Find us" horizontal center layout><a href="../findus.html"></a></core-item>
                                  <core-item id="core_item6" icon="favorite" label="Follow us" horizontal center layout ><a href="../followus.html"></a></core-item>
              </core-menu>
            </section>
          </core-header-panel>
        </section>
        <section id="section1" main>
          <core-scroll-header-panel condenses id="core_scroll_header_panel" headerHeight="256" condensedHeaderHeight="64">

            <core-toolbar class="tall" id="core_toolbar1">
              <paper-icon-button core-drawer-toggle id="navicon" icon="menu"></paper-icon-button>
              <div flex></div>
        <div horizontal center-justified layout class="bottom indent title" > <p><b><font color=#FF1744>Tasty Grill</font></b></p> </div> 

            </core-toolbar>

              <div class="content" horizontal layout center>    

        <post-card1> 

            <div align="center"><h2 align="center">WELCOME TO OUR WEBSITE, BARE IN MIND WE'RE STILL UNDER CONSTRUCTION</h2><p align="center">Take a look at our online Menu by pressing the Burger <core-icon icon="menu"></core-icon> Button above, or if you know exactly what you want call us now on <p><b><a href="tel:01179522233">(0117)9522233</a></b></p></p></div>


      </post-card1></div>

        <section class="section1" horizontal center-justified layout>

<h1>ADSENSE CODE GOES HERE</h1>

</core-header-panel>
          </core-scroll-header-panel>
        </section>
      </core-drawer-panel>
            </template>

【问题讨论】：

你能添加一些源代码吗？我不知道 AdSense。您是否需要添加特定标签才能使 AdSense 脚本正常工作？您是在 Polymer 元素内还是在入口页面 (index.html) 的某处添加了此标签？
您好 Günter，我已经尽我所能添加了一些代码 - 如果这没有帮助，请告诉我... 是的，我需要添加 Google 提供给 HTML 的特定代码，我'已经添加到入口页面而不是聚合物元素。你认为我应该将它添加到聚合物元素中吗？
在链接页面的源代码中，您似乎在 <my-element> 中添加了 Adsense 脚本。我假设 Adsense 代码与 shadow DOM 不兼容，因此失败并出现错误。尝试将其添加到 Polymer 元素之外（直接添加到入口页面）。
您好 Günter，抱歉耽搁了这么久——我最近没有太多时间看这个。如果我将 Adsense 代码放在 Polymer Elements 之外，它会显示，聚合物中有些东西阻止了它的工作。
Polymer 元素引入了影子 DOM。 <template>xxx</template> 元素内部的 HTML 对外部隐藏。 JavaScript/Dart 和 CSS 需要特殊的语法才能访问隐藏在 shadow DOM 中的元素。这会导致许多遗留库/框架出现问题（但仍然是确保封装的正确方向）。您可以在 Chrome devtools 中进行调查（您可能需要先在 devtools 设置中启用 shadow DOM）。

标签： html polymer adsense dart-polymer polymer-designer-tool

【解决方案1】：

今天（2017-05-05）刚刚测试，广告在元素（聚合物 1）内工作正常，没有警告，以下是示例代码：

<paper-card>
    <div class="card-content">
    <p>my content here</p>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- AutoSize -->
    <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-000000000"
     data-ad-slot="000000000"
     data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </div>
</paper-card>

【讨论】：

你能告诉我你在哪个网站上工作吗？