问题

在我的Shopify网站上出现了一个问题，就是当在页眉中存在GTM（Google Tag Manager）代码片段时，搜索功能不起作用。如果我删除它，搜索功能就正常工作。我认为可能是JavaScript脚本重叠的问题，将它放在头部的顶部/中间/底部都不起作用，唯一起作用的方法是将脚本移除。

我的theme.liquid文件如下：

<!doctype html>
<!--[if IE 9]> <html class="ie9 no-js" lang="{{ request.locale.iso_code }}"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="{{ request.locale.iso_code }}">
<!--<![endif]-->

<head>
   <!-- Added by TAPITA SEO SCHEMA-->
  {% if content_for_header contains 'tapita-seo-script-tags' %}
    {% include 'tapita-seo-schema' %}
  {% endif %}
  <!-- /Added by TAPITA SEO SCHEMA -->

  {% render 'pagefly-head' %}
  <meta name="google-site-verification" content="XXXX-XXXX" />
  <meta name="facebook-domain-verification" content="XXXX" />

  {% comment %}
    //COSMOEDIT
  {% endcomment %}
  {% if request.url contains '/search?q=ddos' or request.url contains '/wpm@' %}
    <meta name="robots" content="noindex">
  {% endif %}

  <meta name="google-site-verification" content="XXXX" />
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
  {% if page_description %}
    <meta name="description" content="{{ page_description }}">
  {% endif %}

  {% include 'bitespeed-analytics' %}
  {% include 'framework--social-meta-tags' %}

  {% if template contains 'collection' and current_tags %}
    <link rel="canonical" href="{{ shop.url }}{{ collection.url }}" />
  {% else %}
    <link rel="canonical" href="{{ canonical_url }}" />
  {% endif %}

  {% if request.path == '/collections/vendors' and collection.all_products_count == 0 %}
    <meta name="robots" content="noindex">
  {% endif %}
  <link rel="preconnect" href="https://cdn.shopify.com">

  {% if settings.favicon != nil %}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {% endif %}

  <title>{% if template contains "index" %}{{ page_title }}{% else %}{{ page_title }}{% if current_tags %} {{ 'general.meta.tagged_html' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} {{ 'general.meta.page' | t: page_number: current_page }}{% endif %}{% endif %}</title>

  {% render 'treedify' %}{%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render 'tiny-script-control' %}{%- endif -%}
  {%- render 'bold-common' -%}
  {% include 'framework--css-variables' %}
  {% include 'partial--css-variables' %}

  {{ "theme.css" | asset_url | stylesheet_tag }}
  {{ 'theme--customizations.css' | asset_url | stylesheet_tag }}

  {% include 'partial--js-variables' %}

  {{ 'lazysizes.min.js' | asset_url | script_tag }}

  {% if template contains 'customers' %}
    {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
    {{ 'customer_area.js'  | shopify_asset_url | script_tag }}
  {% endif %}

  {{ "theme.js" | asset_url | script_tag }}

  {% render 'pagefly-header' %}
  <!-- Zapiet | Store Pickup + Delivery -->
  {% include 'storepickup' %}
  <!-- Zapiet | Store Pickup + Delivery -->
  {% include 'scapp-customerinfo' %} 
  {% include 'sca.storepickup' %}
  {{ 'ndnapps-contactform-styles.css' | asset_url | stylesheet_tag }}
  {{ 'ndnapps-formbuilder-styles.css' | asset_url | stylesheet_tag }}
  <script src="//staticxx.s3.amazonaws.com/aio_stats_lib_v1.min.js?v=1.0"></script>
  {% include 'bss-product-labels-configs' %}
  
  {% include 'dataLayer-allPages' %}
  <script>
      window.dataLayer = window.dataLayer || [];
  </script>
  
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');</script>
</head>

{% include 'partial--body-classes' %}
<body
  class="{{ body_classes }}"
  data-theme-id="833"
  data-theme-name="Local"
  data-theme-version="3.3.3"
  {% if template contains 'customers' %}data-account-template="true"{% endif %}
>
 
{% if content_for_header contains 'tapita-seo-script-tags' %}
{%- capture tapita-seo-snippets -%}
{% include 'tapita-page-speed-status' %}
{%- if tapitaPageSpeedStatus -%}
{% include 'tapita-splash-img' %}
{%- endif -%}
{%- endcapture -%}
{%- unless tapita-seo-snippets contains 'Liquid error' -%}
{{ tapita-seo-snippets }}
{%- endunless -%}
{% endif %}
 

    <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
    <div
      class="off-canvas--viewport"
      data-js-class="OffCanvas"
      data-off-canvas--state="closed"
    >
      <div class="off-canvas--overlay"></div>
      <div class="off-canvas--close">
        {% include 'framework--icons', icon: 'cross' %}
      </div>

      <div class="off-canvas--left-sidebar">
        {% include 'layout--mobile-nav' %}
      </div>

      <div class="off-canvas--main-content">
        <div class="fullscreen-container">
          {% if template contains 'index'

<details>
<summary>英文:</summary>

I am having a bug on my shopify site as in - when the GTM code snippet is there on header - The search function doesn&#39;t work. If I remove - it works. I was thinking maybe it was a JS overlapping scripts and placed it top / center / bottom of the head - nothing seems to work. what works is - only taking the script off. 

My theme.liquid file is below

    &lt;!doctype html&gt;
    &lt;!--[if IE 9]&gt; &lt;html class=&quot;ie9 no-js&quot; lang=&quot;{{ request.locale.iso_code }}&quot;&gt; &lt;![endif]--&gt;
    &lt;!--[if (gt IE 9)|!(IE)]&gt;&lt;!--&gt;
      &lt;html class=&quot;no-js&quot; lang=&quot;{{ request.locale.iso_code }}&quot;&gt;
    &lt;!--&lt;![endif]--&gt;
    
    &lt;head&gt;
       &lt;!-- Added by TAPITA SEO SCHEMA--&gt;
      {% if content_for_header contains &#39;tapita-seo-script-tags&#39; %}
        {% include &#39;tapita-seo-schema&#39; %}
      {% endif %}
      &lt;!-- /Added by TAPITA SEO SCHEMA --&gt; 
    
      {% render &#39;pagefly-head&#39; %}
      &lt;meta name=&quot;google-site-verification&quot; content=&quot;XXXX-XXXX&quot; /&gt;
      &lt;meta name=&quot;facebook-domain-verification&quot; content=&quot;XXXX&quot; /&gt;
    
      {% comment %}
        //COSMOEDIT
      {% endcomment %}
      {% if request.url contains &#39;/search?q=ddos&#39; or request.url contains &#39;/wpm@&#39; %}
        &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot;&gt;
      {% endif %}
    
      &lt;meta name=&quot;google-site-verification&quot; content=&quot;XXXX&quot; /&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=5.0&quot;&gt;
      {% if page_description %}
        &lt;meta name=&quot;description&quot; content=&quot;{{ page_description }}&quot;&gt;
      {% endif %}
    
      {% include &#39;bitespeed-analytics&#39; %}
      {% include &#39;framework--social-meta-tags&#39; %}
    
      {% if template contains &#39;collection&#39; and current_tags %} 
        &lt;link rel=&quot;canonical&quot; href=&quot;{{ shop.url }}{{ collection.url }}&quot; /&gt; 
      {% else %} 
        &lt;link rel=&quot;canonical&quot; href=&quot;{{ canonical_url }}&quot; /&gt; 
      {% endif %}
    
      {% if request.path == &#39;/collections/vendors&#39; and collection.all_products_count == 0 %}
        &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot;&gt;
      {% endif %}
      &lt;link rel=&quot;preconnect&quot; href=&quot;https://cdn.shopify.com&quot;&gt;
    
      {% if settings.favicon != nil %}
        &lt;link rel=&quot;shortcut icon&quot; href=&quot;{{ settings.favicon | img_url: &#39;32x32&#39; }}&quot; type=&quot;image/png&quot;&gt;
      {% endif %}
    
      &lt;title&gt;{% if template contains &quot;index&quot; %}{{ page_title }}{% else %}{{ page_title }}{% if current_tags %} {{ &#39;general.meta.tagged_html&#39; | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} {{ &#39;general.meta.page&#39; | t: page_number: current_page }}{% endif %}{% endif %}&lt;/title&gt;
    
      {% render &#39;treedify&#39; %}{%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render &#39;tiny-script-control&#39; %}{%- endif -%}
      {%- render &#39;bold-common&#39; -%}
      {% include &#39;framework--css-variables&#39; %}
      {% include &#39;partial--css-variables&#39; %}
    
      {{ &quot;theme.css&quot; | asset_url | stylesheet_tag }}
      {{ &#39;theme--customizations.css&#39; | asset_url | stylesheet_tag }}
    
      {% include &#39;partial--js-variables&#39; %}
    
      {{ &#39;lazysizes.min.js&#39; | asset_url | script_tag }}
    
      {% if template contains &#39;customers&#39; %}
        {{ &#39;shopify_common.js&#39; | shopify_asset_url | script_tag }}
        {{ &#39;customer_area.js&#39;  | shopify_asset_url | script_tag }}
      {% endif %}
    
      {{ &quot;theme.js&quot; | asset_url | script_tag }}
      
      {% render &#39;pagefly-header&#39; %}
      &lt;!-- Zapiet | Store Pickup + Delivery --&gt;
      {% include &#39;storepickup&#39; %}
      &lt;!-- Zapiet | Store Pickup + Delivery --&gt;
      {% include &#39;scapp-customerinfo&#39; %} 
      {% include &#39;sca.storepickup&#39; %}
      {{ &#39;ndnapps-contactform-styles.css&#39; | asset_url | stylesheet_tag }}
      {{ &#39;ndnapps-formbuilder-styles.css&#39; | asset_url | stylesheet_tag }}
      &lt;script src=&quot;//staticxx.s3.amazonaws.com/aio_stats_lib_v1.min.js?v=1.0&quot;&gt;&lt;/script&gt;
      {% include &#39;bss-product-labels-configs&#39; %}
      
      {% include &#39;dataLayer-allPages&#39; %}
      &lt;script&gt;
          window.dataLayer = window.dataLayer || [];
      &lt;/script&gt;
      
      &lt;script&gt;(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({&#39;gtm.start&#39;:
      new Date().getTime(),event:&#39;gtm.js&#39;});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!=&#39;dataLayer&#39;?&#39;&amp;l=&#39;+l:&#39;&#39;;j.async=true;j.src=
      &#39;https://www.googletagmanager.com/gtm.js?id=&#39;+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,&#39;script&#39;,&#39;dataLayer&#39;,&#39;GTM-XXXXX&#39;);&lt;/script&gt;
    &lt;/head&gt;
                  
      {% include &#39;partial--body-classes&#39; %}
      &lt;body
        class=&quot;{{ body_classes }}&quot;
        data-theme-id=&quot;833&quot;
        data-theme-name=&quot;Local&quot;
        data-theme-version=&quot;3.3.3&quot;
        {% if template contains &#39;customers&#39; %}data-account-template=&quot;true&quot;{% endif %}
      &gt;
     
    {% if content_for_header contains &#39;tapita-seo-script-tags&#39; %}
    {%- capture tapita-seo-snippets -%}
    {% include &#39;tapita-page-speed-status&#39; %}
    {%- if tapitaPageSpeedStatus -%}
    {% include &#39;tapita-splash-img&#39; %}
    {%- endif -%}
    {%- endcapture -%}
    {%- unless tapita-seo-snippets contains &#39;Liquid error&#39; -%}
    {{ tapita-seo-snippets }}
    {%- endunless -%}
    {% endif %}
     
    
        &lt;!-- Google Tag Manager (noscript) --&gt;
    &lt;noscript&gt;&lt;iframe src=&quot;https://www.googletagmanager.com/ns.html?id=GTM-XXXXX&quot;
    height=&quot;0&quot; width=&quot;0&quot; style=&quot;display:none;visibility:hidden&quot;&gt;&lt;/iframe&gt;&lt;/noscript&gt;
    &lt;!-- End Google Tag Manager (noscript) --&gt;
        &lt;div
          class=&quot;off-canvas--viewport&quot;
          data-js-class=&quot;OffCanvas&quot;
          data-off-canvas--state=&quot;closed&quot;
        &gt;
          &lt;div class=&quot;off-canvas--overlay&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;off-canvas--close&quot;&gt;
            {% include &#39;framework--icons&#39;, icon: &#39;cross&#39; %}
          &lt;/div&gt;
    
          &lt;div class=&quot;off-canvas--left-sidebar&quot;&gt;
            {% include &#39;layout--mobile-nav&#39; %}
          &lt;/div&gt;
    
          &lt;div class=&quot;off-canvas--main-content&quot;&gt;
            &lt;div class=&quot;fullscreen-container&quot;&gt;
              {% if template contains &#39;index&#39; %}
                {% section &#39;index--banner&#39; %}
              {% endif %}
              {% unless template == &#39;password&#39; %}
                {% section &#39;announcement&#39; %}
                {% section &#39;header&#39; %}
              {% endunless %}
            &lt;/div&gt;
    
            &lt;main class=&quot;layout--main-content&quot;&gt;
              {{ content_for_layout }}
    	&lt;noscript class=&quot;endOfLayoutContentX&quot; type=&quot;text/mark&quot;&gt;&lt;/noscript&gt;{% render &#39;treedify_script&#39; %}
            &lt;/main&gt;
    
            {% section &#39;framework--footer&#39; %}
    
            {% if settings.popup--enabled %}
              {% include &#39;partial--popup&#39; %}
            {% endif %}
    
            {% include &#39;partial--feedback-bar&#39; %}
    
          &lt;/div&gt;
    
          &lt;div class=&quot;off-canvas--right-sidebar&quot;&gt;
            {% if settings.cart--type == &#39;drawer&#39; or settings.product--show-quick-add-buttons %}
              {% include &#39;framework--cart&#39;, view: &#39;mobile&#39; %}
            {% endif %}
          &lt;/div&gt;
        &lt;/div&gt;
    
        {% include &#39;framework--search&#39;, view: &#39;modal&#39; %}
    
        {% include &#39;framework--modal&#39; %}
    
      
    
    {% include &#39;whatsapp-share&#39; %}
    
    {% include &#39;mw_DD_objects&#39; %}{%- render &#39;bold-currency-converter&#39; -%}
    {% include &#39;mw_fees_objects&#39; %}
      
    
    {{ &#39;ndnapps-contactform-script.js&#39; | asset_url | script_tag }}
    {{ &#39;ndnapps-formbuilder-script.js&#39; | asset_url | script_tag }}
     {% include &#39;smile-initializer&#39; %}
    
    {% if content_for_header contains &#39;product_label&#39; %}{% include &#39;bss-product-label-js&#39; %}{% include &#39;bss-label-style-css&#39; %}{% endif %}{{ &#39;//cdn.shopify.com/s/files/1/0194/1736/6592/t/1/assets/booster-page-speed-optimizer.js?23&#39; | script_tag }}
    
    &lt;/body&gt;
       
    &lt;/html&gt;

The   `{% render &#39;pagefly-head&#39; %}` on header is below

    {% if page and page.metafields.pagefly.html_meta %}
      {{page.metafields.pagefly.html_meta}}
    {% endif %}

The   `{% render &#39;pagefly-header&#39; %}` on header is below

    &lt;script&gt;window.__pagefly_analytics_settings__={&quot;acceptTracking&quot;:true};&lt;/script&gt;

what am I not seeing here? 

</details>


# 答案1
**得分**: 0

你没有做足够的调试。

首先检查你的实现是否有效。你能看到 GTM 已加载吗？
现在看看问题是否与你加载它的方式有关，而不是与 GTM 本身的内容有关。阻止对 GTM 的网络请求，看看是否解决了搜索问题。如果解决了，那么问题可能出在 GTM 上。进入 GTM 并查看它部署的 CHTML 标签。很可能问题出在 CHTML 上。

此外，移除 noscript 部分。它没有任何好处。GTM 应该停止推荐这种无意义的东西，但他们喜欢暗示他们的 TMS 可以在没有 JS 的情况下工作。

检查你的控制台是否有 JS 错误。

<details>
<summary>英文:</summary>

You didn&#39;t do enough debugging.

First check if your implementation even works. Do you see GTM loaded?
Now see if the problem is with how you loaded it versus what&#39;s in GTM itself. Block the network request to GTM and see if that solves your search issue. If it does, then the problem is in GTM. Go into it and see what CHTML tags it deploys. Most likely it&#39;s in CHTML.

Also remove the noscript part. It does no good. GTM should stop recommending this nonsense, but they like to imply their TMS works with no JS.

Check your console for JS errors.

</details>



# 答案2
**得分**: 0

以下是翻译好的部分：

"Finally, this was fixed by adding GTM snippet at the end of the body with jQuery. it will be as below;"

最后，通过在页面末尾使用jQuery添加GTM代码片段来解决了此问题，如下所示：

```html
<script type="text/javascript">
  $(document).ready(function() {
    (function(w,d,s,l,i) {
      w[l] = w[l] || [];
      w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
      var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s), dl = (l !== 'dataLayer') ? '&l=' + l : '';
      j.async = true;
      j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
      f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-XXXXXXXX');
  });
</script>

"This lets all other DOM element to load and this snippet is on action at last. That way it can't prevent any site's function / script to load."

这样做可以让所有其他DOM元素加载，并且此代码片段最后执行。这样就不会阻止任何站点的功能/脚本加载。

英文:

Finally, this was fixed by adding GTM snippet at the end of the body with jQuery. it will be as below;

&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
(function(w,d,s,l,i) {
w[l] = w[l] || [];
w[l].push({&#39;gtm.start&#39;: new Date().getTime(), event:&#39;gtm.js&#39;});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = (l !== &#39;dataLayer&#39;) ? &#39;&amp;l=&#39; + l : &#39;&#39;;
j.async = true;
j.src = &#39;https://www.googletagmanager.com/gtm.js?id=&#39; + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, &#39;script&#39;, &#39;dataLayer&#39;, &#39;GTM-XXXXXXXX&#39;);
});
&lt;/script&gt;

This lets all other DOM element to load and this snippet is on action at last. That way it can't prevent any site's function / script to load.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

GTM脚本禁用了Shopify网站的搜索功能。

问题

HTTP 400 Bad Request在将更多字符与URL一起发送到服务器时。

使用useParams获取id（react router dom v6.11.0）

如何使用jQuery切换多个div

Grouped_select，如何显示之前选择的项目和/或类别。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论