Skip to main content

Custom Tags

Creating a Custom Tag in Google Tag Manager (GTM)

The GTM Assistant app for Shopify lets you define custom tags to track specific user actions on your storefront—like button clicks, form submissions, and other interactions. These tags give you more control and flexibility in capturing meaningful analytics data tailored to your theme.

What Are Custom Tags?​

Custom tags are GTM configurations that monitor user interactions based on specific CSS selectors (class or ID). They are especially useful when built-in standard tags don’t capture unique interactions relevant to your store.

Step-by-Step Guide: How to Create a Custom Tag​

Follow these steps to create a custom tag using the configuration form provided in the GTM Assistant app:

Step 1: Select Theme​

  • Field: Select Theme
  • Options: Choose the currently active Shopify theme.
  • Purpose: Tags are created specifically for the selected theme. If you change the theme later, the selectors may no longer be valid.
  • Tip: Always recheck your tags when switching themes, as CSS selectors may differ across themes.

Step 2: Enter Tag Name​

  • Field: Tag Name
  • Input: Provide a descriptive name (e.g., Click - Add to Cart, Form Submission - Contact).
  • Purpose: Helps you easily identify and manage your tag inside GTM.
  • Tip: Use a clear naming convention combining the interaction type and target element.

Step 3: Choose Tag Type​

  • Field: Tag Type
  • Options:
    • Click – For button or link clicks
    • Page View – For tracking when a page is loaded
    • Form Submission – For tracking form completions
  • Purpose: Determines what type of user interaction the tag will track.
  • Tip: Match the tag type to your specific tracking goal.

Step 4: Select Selector Type​

  • Field: Selector Type
  • Options:
    • Class – Tracks all elements with a shared CSS class
    • ID – Tracks a single, uniquely identified element
  • Purpose: Defines the method for targeting elements in your theme.
  • Tip: Use ID for single buttons and Class for elements used in multiple places.

Step 5: Enter CSS Selector​

  • Field: CSS Selector
  • Input:
    • For Class, enter without the dot prefix (e.g., btn-submit)
    • For ID, enter without the hash prefix (e.g., addToCart)
  • Purpose: Tells GTM exactly which element(s) to track.
  • Tip: Use your browser's "Inspect" tool to locate the exact class or ID.

Step 6: Create the Tag​

  • Action: Click the Create Tag button once all fields are complete.
  • Outcome: Your tag will be saved in GTM with the specified configuration.
  • Next Steps: Use GTM’s Preview mode to verify the tag is firing correctly.

Example: Track "Add to Cart" Button Click​

Let’s walk through creating a tag for an "Add to Cart" button:

  • Select Theme: Choose your current theme (e.g., Dawn)
  • Tag Name: Click - Add to Cart Button
  • Tag Type: Click
  • Selector Type: Class
  • CSS Selector: add-to-cart (if the button has class .add-to-cart)
  • Create Tag: Click Create Tag and test it in GTM Preview mode.

How to Get a CSS Selector for GA4 Event Tracking​

To track a custom event in GA4, you need the correct CSS selector for the element being interacted with. Here's how to find it:

  1. Open the page where the element (button, link, etc.) exists.
  2. Right-click the element you want to track and select Inspect (or press Ctrl + Shift + I on Windows / Cmd + Option + I on Mac).
  3. In the Elements panel of Developer Tools, the corresponding HTML will be highlighted.
  4. Right-click the highlighted HTML and select Copy > Copy selector.

If the copied selector is too complex or generic, refine it manually by using unique attributes like a class or ID.

Examples​

  • ID-based selector: 
    #submit-button

Best Practices​

  • Use Preview Mode: Always test your tags using GTM’s built-in preview to confirm they fire as expected.
  • Avoid Conflicts: Ensure tag names and selectors are unique to avoid duplication or misfiring.
  • Monitor in GA4: Once published, check Google Analytics 4 to confirm data is being tracked correctly.

Need Help?​

If you need assistance with tag creation or configuration, feel free to contact our support team at support@webgarh.co.in.