How to Connect Google Tag Manager to Your Website Using OzSpeed hPanel

Google Tag Manager (GTM) is a powerful tool that allows you to manage and deploy marketing tags (e.g., Google Analytics, Meta Pixel) without modifying your website’s code directly. With GTM, you can easily track user interactions, measure conversions, and optimize your marketing efforts. Here’s a step-by-step guide on how to connect Google Tag Manager using OzSpeed’s hPanel.

---

Step 1: Create a Google Tag Manager Account #

If you don’t already have a GTM account, you’ll need to set one up.

How to Create a GTM Account: #

1. Go to Google Tag Manager and click Create Account.
2. Enter your Account Name (e.g., “OzSpeed”).
3. Enter your Container Name (e.g., “ozspeed.com.au”) and select the Target Platform (e.g., Web).
4. Click Create and accept the GTM Terms of Service.
5. Copy the GTM Container Code provided by Google Tag Manager.

Example GTM Container Code: #

htmlCopy code<!-- Google Tag Manager Head Code -->
<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 Head Code -->

<!-- Google Tag Manager NoScript Code -->
<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 Code -->

Tip: #

• Replace GTM-XXXXXXX with your actual GTM Container ID.

---

Step 2: Add the GTM Code to Your Website Using hPanel #

To activate Google Tag Manager on your website, you need to add the GTM code snippets to your website’s header and body sections using hPanel.

How to Add GTM Code: #

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Settings > Custom Code.
3. Paste the GTM Head Code snippet in the Header Code section.
4. Paste the GTM NoScript Code snippet in the Body Code section.
5. Click Save.

Tip: #

• Make sure both code snippets are added and saved correctly to ensure proper functionality.

---

Step 3: Verify GTM Installation #

To confirm that GTM is installed correctly on your website, use the Tag Assistant Chrome extension.

How to Verify GTM: #

1. Install the Google Tag Assistant extension from the Chrome Web Store.
2. Open your website in a new browser tab.
3. Click on the Tag Assistant icon and look for a green checkmark indicating that GTM is detected.
4. You can also check in GTM’s Preview Mode:
   • Click Preview in Google Tag Manager.
   • Enter your website URL and click Connect.
   • Check if the GTM tags are firing correctly.

Tip: #

• If the tags are not detected, double-check the code placement and clear your browser cache.

---

Step 4: Set Up Google Analytics Tag in GTM #

One of the most common uses of GTM is to add Google Analytics tracking without modifying the website code.

How to Set Up Google Analytics Tag: #

1. In your GTM dashboard, click Tags > New > Tag Configuration.
2. Select Google Analytics: GA4 Configuration or Universal Analytics (depending on your setup).
3. Enter your Measurement ID (for GA4) or Tracking ID (for Universal Analytics).
4. Click Triggering and select All Pages.
5. Click Save and name your tag (e.g., “GA4 Pageview Tag”).

Tip: #

• Use Preview Mode in GTM to test if the Google Analytics tag is firing correctly.

---

Step 5: Publish Your Changes in Google Tag Manager #

After setting up your tags, triggers, and variables, you need to publish your changes for them to take effect.

How to Publish Changes: #

1. Click Submit in the GTM dashboard.
2. Enter a Version Name and Description (e.g., “Initial Setup”).
3. Click Publish.

Tip: #

• Use descriptive names for each version to keep track of changes.

---

Step 6: Add Additional Tags (Optional) #

You can use GTM to deploy various marketing tags, such as:

• Meta Pixel: Track Facebook ad performance.
• Google Ads Conversion Tracking: Measure ad conversions.
• LinkedIn Insight Tag: Track LinkedIn ad performance.
• Custom HTML Tags: Add custom tracking scripts.

Example: Meta Pixel Tag Setup #

1. Click Tags > New > Tag Configuration > Custom HTML.
2. Paste your Meta Pixel code.
3. Select the appropriate Trigger (e.g., All Pages).
4. Click Save and Publish.

Tip: #

• Test each tag in Preview Mode before publishing.

---

Step 7: Monitor Tag Performance in GTM and Google Analytics #

After setting up GTM, monitor your tag performance to ensure everything is working as expected.

How to Monitor: #

1. Go to Google Analytics > Real-Time Reports to see if your tracking tags are firing correctly.
2. Use the Tag Assistant extension to identify any issues with tag firing.
3. Check the GTM Debug Mode for detailed information about each tag.

Tip: #

• Regularly review your GTM setup to optimize tag performance and accuracy.

---

Troubleshooting Tips #

1. Tags Not Firing:
   • Ensure the GTM code snippets are correctly added to your website in the Header Code and Body Code sections.
   • Use Preview Mode in GTM to identify issues.
2. Tag Firing Multiple Times:
   • Check your triggers to ensure they are not set to fire multiple times on the same page.
   • Use the GTM Debug Console to see how often each tag is firing.
3. Incorrect Data in Google Analytics:
   • Verify your Measurement ID or Tracking ID in GTM.
   • Ensure there are no duplicate tags or conflicting triggers.

---

Additional Tips: #

• Use Built-in Variables: Take advantage of GTM’s built-in variables (e.g., Page URL, Click ID) for more detailed tracking.
• Leverage GTM Templates: Use pre-built templates for common marketing tags to simplify the setup process.
• Stay Organized: Name your tags, triggers, and variables clearly to keep your GTM workspace organized.