Logo
出海数字营销宝典
Cross-Border Digital Marketing Playbook🧡
Home
Product
LinkGate Short Links

Simple, secure, high-performance short links.

UTM URL Builder

The core tool. Generate, validate, and track.

Social Preview (OG)New

Simulate how your links look on Facebook, X, LinkedIn and more.

Secure Password Gen

Generate strong, secure passwords instantly with a roll of the dice.

Free Invoice GeneratorNew

Create professional invoices with customizable templates and offline storage.

Global Marketing Calendar2026

Global holiday dates with pre-set UTMs.

QR Code Studio

Create branded, artistic QR codes.

Markdown EditorBeta

Real-time editing, instant preview. The best place to write.

Drawing Whiteboard

Real-time collaborative whiteboard.

Local File Viewer

Preview Office, PDF, CAD files 100% locally.

Document Compare & ReviewHot

Side-by-side local comparison and technical review.

One IP TelemetryNew

Real-time fraud score, residential IP check, Globalping probes.

News
SEO Best PracticesNew

The ultimate guide to modern SEO.

UTM Best Practices

Master the art of tracking naming conventions.

GEO Best Practices

Generative Engine Optimization operational standards.

AI Agent Best Practices

AI Agent and Prompt Engineering best practices.

AI Image Best PracticesNew

AI image generation, e-commerce shoot & visual studio.

Cognitive Biases

Psychology principles for better conversion.

Ad & SEO Glossary

Decode industry jargon like ROAS, CPC, and more.

Copywriting Guide

Standard usage for Chinese & English copywriting.

Markdown Crash CourseDev

Learn the syntax to format your content beautifully.

Shopify Guide

Tracking, fraud audit and session dimension playbook.

DTC Ad PlaybookPlaybook

Interactive full-lifecycle ad scaling & cross-border DTC playbook.

Team
About UsContact UsProduct Updates
Legal
Terms of UsePrivacy Policy
LinkGate
Logo
出海数字营销宝典
Made with🧡by 虾兄

The all-in-one growth hub and toolkit designed for global brands and cross-border sellers. Deeply integrating actionableGoogle SEO StrategiesandSEO Masterclass, cutting-edgeGenerative Engine Optimization (GEO),AI Agent Automation Workflows, andShopify Operational Playbooks. Powered by a full suite of free marketing utilities—includingUTM Link Tracking,Document Comparison, andGlobal Marketing Calendars—to help you capture global search traffic and scale your international business.

ECOSYSTEM & PARTNERS•Certified Ecosystem
Google
Partner
MetaPartner
S
ShopifyPartner
B
CertifiedCorp

Product

  • LinkGate (Short URL)
  • UTM Generator
  • Social Preview (OG)
  • Secure Password Gen
  • Free Invoice Generator NEW
  • Drawing Whiteboard
  • Markdown Editor
  • Local File Viewer
  • Document Compare & Review HOT
  • IP & Network Telemetry NEW
  • Shopify GTM Generator
  • Shopify Fraud Audit
  • Marketing Calendar

Explore

  • AI Agent Best Practices HOT
  • AI Image Best Practices NEW
  • GEO Best Practices
  • SEO Best Practices
  • SEO Masterclass
  • Shopify Column
  • DTC Ad Playbook HOT
  • Best Practices
  • Cognitive Biases
  • Ad & SEO Glossary
  • Copywriting Guide
  • Markdown Crash Course
  • News

About

  • About Us
  • Contact
  • Product Updates

Legal

  • Terms of Use
  • Privacy Policy

© 2026 出海数字营销宝典. All rights reserved.

Made with love by虾兄
Copy URL
Back to Top
  1. Home
  2. Shopify
  3. GTM Generator
GTM + Customer Events API

Shopify GTM & Web Pixel Code Generator

Deploy Google Tag Manager and GA4 e-commerce tracking in minutes using Shopify's modern API.

11. Configuration Settings

22. E-commerce Events to Track

33. Generated Code Scripts

Paste this script in Shopify Admin -> Settings -> Customer Events -> Add Custom Pixel. This sandbox-safe pixel catches all user and checkout activities, forwarding them to GTM's dataLayer.
// Shopify Custom Web Pixel (Checkout and Sandbox Compatible)
// Generated by Shopify Marketing & Analytics Hub

(function() {
  // Initialize the sandboxed GTM DataLayer
  window.dataLayer = window.dataLayer || [];
  
  // Load GTM library inside sandboxed environment
  (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-XXXXXXX');

  // Event Analytics Subscriptions
  analytics.subscribe("page_viewed", (event) => {
    window.dataLayer.push({
      event: "shopify_page_viewed",
      id: event.id,
      clientId: event.clientId,
      timestamp: event.timestamp,
      url: event.context.document.location.href,
      referrer: event.context.document.referrer
    });
  });

  analytics.subscribe("product_viewed", (event) => {
    const customData = event.data?.productVariant;
    window.dataLayer.push({
      event: "view_item",
      timestamp: event.timestamp,
      ecommerce: {
        currency: customData?.price?.currencyCode || "USD",
        value: parseFloat(customData?.price?.amount || "0"),
        items: [{
          item_id: customData?.id,
          item_name: customData?.title,
          price: parseFloat(customData?.price?.amount || "0"),
          quantity: 1
        }]
      }
    });
  });

  analytics.subscribe("collection_viewed", (event) => {
    const customData = event.data?.collection;
    window.dataLayer.push({
      event: "view_item_list",
      timestamp: event.timestamp,
      ecommerce: {
        item_list_id: customData?.id,
        item_list_name: customData?.title,
        items: []
      }
    });
  });

  analytics.subscribe("product_added_to_cart", (event) => {
    const customData = event.data?.cartLine?.merchandise;
    window.dataLayer.push({
      event: "add_to_cart",
      timestamp: event.timestamp,
      ecommerce: {
        currency: customData?.price?.currencyCode || "USD",
        value: parseFloat(customData?.price?.amount || "0") * (event.data?.cartLine?.quantity || 1),
        items: [{
          item_id: customData?.id,
          item_name: customData?.product?.title,
          item_variant: customData?.title,
          price: parseFloat(customData?.price?.amount || "0"),
          quantity: event.data?.cartLine?.quantity || 1
        }]
      }
    });
  });

  analytics.subscribe("checkout_started", (event) => {
    const customData = event.data?.checkout;
    window.dataLayer.push({
      event: "begin_checkout",
      timestamp: event.timestamp,
      ecommerce: {
        currency: customData?.currencyCode || "USD",
        value: parseFloat(customData?.totalPrice?.amount || "0"),
        items: customData?.lineItems?.map(item => ({
          item_id: item.variant?.id,
          item_name: item.variant?.product?.title,
          price: parseFloat(item.variant?.price?.amount || "0"),
          quantity: item.quantity
        })) || []
      }
    });
  });

  analytics.subscribe("checkout_completed", (event) => {
    const customData = event.data?.checkout;
    window.dataLayer.push({
      event: "purchase",
      timestamp: event.timestamp,
      ecommerce: {
        transaction_id: customData?.order?.id || event.id,
        currency: customData?.currencyCode || "USD",
        value: parseFloat(customData?.totalPrice?.amount || "0"),
        tax: parseFloat(customData?.totalTax?.amount || "0"),
        shipping: parseFloat(customData?.shippingLine?.price?.amount || "0"),
        items: customData?.lineItems?.map(item => ({
          item_id: item.variant?.id,
          item_name: item.variant?.product?.title,
          price: parseFloat(item.variant?.price?.amount || "0"),
          quantity: item.quantity
        })) || []
      }
    });
  });

  analytics.subscribe("search_submitted", (event) => {
    window.dataLayer.push({
      event: "search",
      search_term: event.data?.searchQuery
    });
  });

})();

How to deploy:

  • 1Enter your Google Tag Manager Container ID above (e.g., GTM-K17AB12).
  • 2Select the specific e-commerce actions you want to track on your storefront.
  • 3Copy the generated 'Shopify Custom Pixel' script. In your Shopify Store Admin, navigate to 'Settings' > 'Customer Events', click 'Add custom pixel', name it (e.g. 'GTM-Tracking'), and paste the code.
  • 4Copy the 'GTM Theme Loader' Liquid code, open your Shopify Online Store Theme Editor, edit 'theme.liquid', and paste it directly after the opening '<head>' tag.