I am having a bug on my shopify site as in – when the GTM code snippet is there on header – The search function doesn’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
<!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' %}
{% section 'index--banner' %}
{% endif %}
{% unless template == 'password' %}
{% section 'announcement' %}
{% section 'header' %}
{% endunless %}
</div>
<main class="layout--main-content">
{{ content_for_layout }}
<noscript class="endOfLayoutContentX" type="text/mark"></noscript>{% render 'treedify_script' %}
</main>
{% section 'framework--footer' %}
{% if settings.popup--enabled %}
{% include 'partial--popup' %}
{% endif %}
{% include 'partial--feedback-bar' %}
</div>
<div class="off-canvas--right-sidebar">
{% if settings.cart--type == 'drawer' or settings.product--show-quick-add-buttons %}
{% include 'framework--cart', view: 'mobile' %}
{% endif %}
</div>
</div>
{% include 'framework--search', view: 'modal' %}
{% include 'framework--modal' %}
{% include 'whatsapp-share' %}
{% include 'mw_DD_objects' %}{%- render 'bold-currency-converter' -%}
{% include 'mw_fees_objects' %}
{{ 'ndnapps-contactform-script.js' | asset_url | script_tag }}
{{ 'ndnapps-formbuilder-script.js' | asset_url | script_tag }}
{% include 'smile-initializer' %}
{% if content_for_header contains 'product_label' %}{% include 'bss-product-label-js' %}{% include 'bss-label-style-css' %}{% endif %}{{ '//cdn.shopify.com/s/files/1/0194/1736/6592/t/1/assets/booster-page-speed-optimizer.js?23' | script_tag }}
</body>
</html>
The {% render 'pagefly-head' %} on header is below
{% if page and page.metafields.pagefly.html_meta %}
{{page.metafields.pagefly.html_meta}}
{% endif %}
The {% render 'pagefly-header' %} on header is below
<script>window.__pagefly_analytics_settings__={"acceptTracking":true};</script>
what am I not seeing here?
2
Answers
Finally, this was fixed by adding GTM snippet at the end of the body with jQuery. it will be as below;
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.
You didn’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’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’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.