Installing Google Tag Manager on Zyro

Google Tag Manager (GTM) allows you to manage all your marketing and analytics tags from a single platform. This guide covers how to install GTM on your Zyro site and configure it for optimal tracking.

Prerequisites

Before installing GTM on Zyro, you need:

1. A Zyro account with a paid plan (Unleash, eCommerce, or eCommerce Plus)
2. A Google Tag Manager account - Create one free
3. A GTM container for your website
4. Published Zyro site (GTM only works on published sites)

Note: GTM requires a paid Zyro plan because custom code access is not available on the free plan.

Step 1: Create a GTM Container

1. Go to Google Tag Manager
2. Click Create Account
3. Fill in account details:
   • Account Name: Your name or company
   • Country: Your location
4. Set up container:
   • Container Name: Your Zyro site name or domain
   • Target Platform: Select Web
5. Click Create
6. Accept the Terms of Service

Step 2: Get Your GTM Container Code

After creating your container, you'll see installation instructions with two code snippets:

Head Code

<!-- Google Tag Manager -->
<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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Body Code (Noscript Fallback)

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Copy both code snippets - you'll need them for Zyro.

Step 3: Add GTM to Your Zyro Site

Method 1: Custom Code (Recommended)

1. Log in to your Zyro dashboard
2. Select your website
3. Click Settings in the left sidebar
4. Scroll to Website code section
5. Find the Header code field
6. Paste both GTM code snippets (head code first, then noscript code)
7. Click Save

Combined code to paste:

<!-- Google Tag Manager -->
<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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Replace GTM-XXXXXXX with your actual container ID.

Method 2: Built-in Integration (Limited)

Zyro (now part of Hostinger Website Builder) has a built-in code injection area. Go to Settings > Custom Code to add your GTM snippet:

1. Go to Settings → Integrations
2. Find Google Tag Manager
3. Click Connect or Add
4. Enter your GTM Container ID (GTM-XXXXXXX)
5. Click Save

Note: Custom code method is recommended for full control and compatibility.

Step 4: Publish Your Site

1. Click the Publish button (top right corner)
2. Wait for Zyro to deploy your changes (usually 1-2 minutes)
3. Visit your live site

Step 5: Verify GTM Installation

Using GTM Preview Mode

1. Go to Google Tag Manager
2. Select your container
3. Click Preview in the top right
4. Enter your published Zyro site URL
5. Click Connect
6. A new tab will open showing your site with GTM debug panel
7. Verify "Container Loaded" message appears

Using Browser Developer Tools

1. Open your published Zyro site
2. Press F12 to open Developer Tools
3. Go to Console tab
4. Type: google_tag_manager
5. Press Enter
6. You should see an object with your GTM container ID

Using Google Tag Assistant

1. Install Google Tag Assistant
2. Visit your published Zyro site
3. Click the Tag Assistant icon
4. Verify Google Tag Manager is detected
5. Check that container ID is correct

Step 6: Configure Tags in GTM

Now that GTM is installed, configure your tags.

Add Google Analytics 4

1. In GTM, click Tags > New
2. Click Tag Configuration
3. Select Google Analytics: GA4 Configuration
4. Enter your GA4 Measurement ID (G-XXXXXXXXXX)
5. Click Triggering
6. Select All Pages
7. Name the tag "GA4 - Configuration"
8. Click Save

Add Meta Pixel

1. Click Tags > New
2. Click Tag Configuration
3. Select Custom HTML
4. Paste your Meta Pixel base code
5. Click Triggering
6. Select All Pages
7. Name the tag "Meta Pixel - Base Code"
8. Click Save

Step 7: Publish GTM Container

1. Click Submit in GTM
2. Add Version Name (e.g., "Initial Zyro Setup")
3. Add Version Description (optional)
4. Click Publish

Your tags are now live on your Zyro site!

Zyro-Specific GTM Configuration

Built-in Variables

Enable these built-in variables for Zyro tracking:

1. Go to Variables in GTM
2. Click Configure in the Built-In Variables section
3. Enable:
   • Click Element
   • Click Text
   • Click URL
   • Form Element
   • Form Text
   • Page URL
   • Page Hostname
   • Referrer

Custom Variables for Zyro

Create useful custom variables:

Site Type Variable

1. Go to Variables > New
2. Click Variable Configuration
3. Select Constant
4. Set value to describe your site type (e.g., ecommerce, business, portfolio)
5. Name it "Site Type"
6. Click Save

Triggers for Zyro

Form Submission Trigger

1. Triggers > New
2. Trigger Configuration > Form Submission
3. This trigger fires on: All Forms
4. Name: "All Form Submissions"
5. Save

Important: Test thoroughly - some Zyro forms may require custom configuration.

Button Click Trigger

1. Triggers > New
2. Trigger Configuration > Click - All Elements
3. This trigger fires on: Some Clicks
4. Add condition: Click Classes contains zyro-button OR Click Element matches button
5. Name: "Button Clicks"
6. Save

Scroll Depth Trigger

1. Triggers > New
2. Trigger Configuration > Scroll Depth
3. Vertical Scroll Depths: 25, 50, 75, 100
4. Name: "Scroll Depth"
5. Save

Data Layer for Zyro

Zyro doesn't have native data layer support, but you can push custom data.

Push Custom Events

Add to Settings → Website code → Footer code:

<script>
window.dataLayer = window.dataLayer || [];

// Push custom data on page load
dataLayer.push({
  'event': 'zyroPageLoad',
  'pageType': 'business',
  'templateName': 'modern'
});
</script>

Push Form Submission Data

<script>
document.addEventListener('DOMContentLoaded', function() {
  var forms = document.querySelectorAll('form');

  forms.forEach(function(form) {
    form.addEventListener('submit', function() {
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'formSubmit',
        'formId': form.getAttribute('id') || 'contact_form'
      });
    });
  });
});
</script>

Then create a Custom Event trigger in GTM:

• Event name: formSubmit

Best Practices for Zyro + GTM

1. Performance Optimization

• Use built-in tag templates when available (optimized)
• Avoid excessive custom HTML tags
• Use tag sequencing for dependencies
• Test performance impact with PageSpeed Insights

2. Tag Organization

• Naming convention: Use "Tool - Action" format (e.g., "GA4 - Page View")
• Folders: Group related tags
• Comments: Add notes to complex tags
• Version descriptions: Document changes

3. Testing Workflow

1. Make changes in GTM
2. Click Preview
3. Test on published Zyro site
4. Verify tags fire correctly
5. Check for JavaScript errors
6. Submit and publish

4. Form Tracking Considerations

Test form submissions thoroughly on Zyro:

• Verify form submission trigger fires
• Check that events reach analytics platforms
• Test on mobile devices
• Ensure no JavaScript errors

Troubleshooting

GTM Not Loading

Problem: GTM container doesn't load on Zyro site.

Solutions:

1. Verify paid plan: GTM requires Unleash, eCommerce, or eCommerce Plus plan
2. Check site is published: GTM doesn't work in preview mode
3. Verify container ID: Ensure GTM-XXXXXXX is correct
4. Check code placement: Code should be in Header code
5. Look for JavaScript errors: Open browser console (F12)
6. Clear cache: Hard reload (Ctrl+Shift+R)

Tags Not Firing

Problem: GTM loads but tags don't fire.

Solutions:

1. Check triggers: Verify trigger conditions are met
2. Use Preview mode: Debug with GTM preview
3. Verify IDs: Double-check measurement IDs, pixel IDs
4. Test in incognito: Rule out browser extensions
5. Check firing order: Some tags depend on others

Form Tracking Not Working

Problem: Form submission tags don't fire.

Solutions:

1. Test trigger conditions: May need to adjust form trigger settings
2. Check Zyro form structure: Zyro forms may have specific classes
3. Use dataLayer push: Manually push form events
4. Add delay: Give tags time to fire before redirect

Next Steps

• Configure GA4 Events via GTM
• Set Up Meta Pixel via GTM
• Troubleshoot Tracking Issues

Additional Resources

• Google Tag Manager Documentation
• GTM Fundamentals Course
• Zyro Help Center