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?
Finally, this was fixed by adding GTM snippet at the end of the body with jQuery. it will be as below;
<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.