Devcron Platform
DashboardHome
  • Welcome
  • Platform News
    • Recents
      • Devcron Sites Are Now More Accessible
      • This Global Colors Feature Cuts Color Picks by 80% and Ups Scalability
      • Jump Start Your Site Membership by Actively Inviting Members
  • Overview
    • Platform Overview
    • Dashboard and Account
      • Dashboard Overview
      • Site Overview
      • Account Setting
      • Site Comments
      • Statistics and Analytics
  • Professional Website Builder
    • Getting Started
      • Editor Overview
      • Launching Your Site Checklist
      • Row Editor
      • Global Design
      • Global Colors
      • Responsive Tablet
      • Customize Background
      • Edit by Device
      • Switch Views
      • Sidebar Layout for Desktop
      • Global Text
      • Image Picker
      • Manage and Import Content
      • Add Sections
      • Arrange Content
      • Copy and Paste
      • Quick Access
      • Show Hidden Elements
      • Keyboard Shortcuts
      • System Requirements
    • Publishing Site
      • Go Live, Publish, and Set Up Your Domain
      • Purchase a Custom Domain
      • Configure Alternate Domains
      • Unpublish a Site
    • Pages and Popups
      • Pages and Popups
      • Configure a Multi-Language Site
      • Add a Navigation Folder
      • Change Home Page
      • Password Protected Pages
      • Publish a Single Page
    • Membership (New)
      • Add Membership Pages
      • Membership Plans
      • Bulk Invite Members to Membership Sites
    • Header and Footer
      • Headers
      • Header and Expandable Menu
      • Shrinking Headers
      • Footer
    • Content
      • Local Business Schema
      • Image Terms and Licensing
      • Image Size Guidelines
      • Image Editor
      • Add Premium Images (Shutterstock Images)
      • Video Backgrounds
      • Use the Color Picker
    • Connected Data and Dynamic Pages
      • Connected Data
      • Dynamic Pages
      • Collections
      • Internal Collections
      • Airtable Collections
      • Google Sheets Collections
      • External Collections
      • Create Dynamic Pages
      • Connect Your Dynamic Page Widgets
      • Add Lists to Display Dynamic Pages
    • Flex Editor
      • Flex Overview
      • Flex Breakpoints
      • Flex Design Panel
      • Add and Edit Flex Sections
      • Create Overlapping Elements in Flex
      • Flex Alignment and Spacing
    • Personalization Rules
      • Personalization Rules
    • Blog
      • About Blogs
      • Updating an Old Blog to the New Blog Platform
      • Blog Settings
      • Add and Edit Blog Posts
      • Manage Post Settings
      • Import Blog Posts from RSS Feeds
    • Custom Code
      • Custom Code Guidelines
      • Using HTML and Custom Code
      • How Can I Troubleshoot Custom Code?
      • Developer Mode
      • Google Analytics Integration
    • Site Settings
      • Site Settings
      • Site Icons
      • Backup Sites
      • Add SSL or HTTPS
      • Load Site in an iframe
      • Header HTML
      • Set a Default Site Language
      • Facebook Tracking Pixels
      • How to Add Schema Markup to Your Site
      • URL Redirects
      • Privacy Settings
      • Site SEO Settings
      • Introduction to SEO
      • Examples of SEO Keywords and Descriptions
      • IndexNow
      • Fonts Library
      • Security Measures
      • General Data Protection Regulation (GDPR) Compliance Information and Resources
      • The California Consumer Privacy Act of 2018 (CCPA) Compliance Information and Resources
      • Introduction to Core Web Vitals
      • Optimize Your Site for Core Web Vitals
      • Core Web Vitals FAQs
      • Lighthouse and Core Web Vitals Comparison
      • Progressive Web App (PWA)
      • Google Tag Manager Tracking
    • Edit On Mobile
      • Edit On the Go
      • Site Stats on Mobile
      • Use the Dashboard on Mobile
      • Edit Image Widgets on Mobile
      • Edit Image Slider and Photo Gallery Widgets on Mobile
      • Edit Click-to-Call and Click-to-Email on Mobile
      • Select and Add Images on Mobile
      • Link Picker
      • Backup, Publish, Re-publish, and Unpublish on Mobile
      • Edit Sites on a Tablet
  • Widgets
    • Widget Overview
      • Add Widgets
      • Edit Widgets
      • Widget Design
      • Outer and Inner Spacing
      • Inline Editing
      • Add Animations
      • Blog Widgets
    • Basic Widgets
      • Text Editor
      • Title Widgets
      • Button Widget
      • Floating Buttons
      • Breadcrumbs Widget
      • Icon Widgets
      • Table Widget
      • Navigation and Sub-Navigation Links
      • Anchor Tags and Links
      • Text & Image Widget
      • List Widget
      • Accordion Widget
      • Tabs Widget
      • Countdown Widget
      • Copyright Widget
      • Spacer Widget
      • Upload a File
    • Media Widgets
      • Image Widget
      • Photo Gallery Widget
      • Image Slider Widget
      • Video Widget
      • Troubleshooting Video Widget
      • Lottie Animation Widgets
      • Before & After Widget
      • Shape Widgets
      • Audio Widgets
    • Business Widgets
      • Contact Forms
      • Configure a GDPR-Friendly Contact Form
      • Contact Form Responses
      • Contact Form Integrations
      • Contact Form Troubleshooting
      • Zoom Widget
      • Map Widget
      • Google Calendar Widget
      • Click To Call
      • Click to Email
      • Business Hours
      • Multi Location Widget
      • Yelp Reviews
      • Online Scheduling
      • OpenTable Reservation Buttons
      • Restaurant Menus
      • Coupons
      • PayPal Button
    • Social Widgets
      • Instagram Feed
      • Reconnect Instagram Feed
      • Social Icons
      • WhatsApp Widgets
      • Social Share Widgets
      • Twitter Feeds
      • Facebook Feeds
      • Facebook Like Button
      • Facebook Comments
      • Disqus Comments
      • RSS Feeds
Powered by GitBook
On this page
  • Add Google Tag Manager
  • Set Up Google Tag Manager
  • Considerations for Google Tag Manager

Was this helpful?

  1. Professional Website Builder
  2. Site Settings

Google Tag Manager Tracking

PreviousProgressive Web App (PWA)NextEdit On Mobile

Last updated 2 years ago

Was this helpful?

This article shows you how to implement Google Tag Manager inside of your site.

This article does not follow Google’s instructions exactly, but have been tested and work correctly. The instructions have been changed from Google’s instructions for the following reasons:

  1. Google asks you to install the code in the <head> of the site. This is a bad practice for page speed because it will slow down the loading of the site. Due to this, we place it at the bottom <body-end>, so it loads last.

  2. It is easier to copy code into a single location.

Add Google Tag Manager

Google will give you code embeds that look like the examples below. Both of these need to be installed into the <body-end> of the site. To locate the <body-end> of the site, in the side panel of the editor, click Settings, and then click Head HTML.

Note

The below code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Google.

Script Section

NoScript Section

Set Up Google Tag Manager

Warning

This step is critical in allowing Google Tag Manager tracking inside your site.

Next, we need to replace the default All Pages page view trigger with our custom event. Inside of tag manager, we need to first create the custom event trigger:

  1. Go to Google Tag Manager and sign in.

  2. On the left, click Triggers.

  3. On the right side, click the new button.

  4. Type a name for the trigger at the top left. We recommend something memorable and helpful, such as: Custom Page View Trigger.

  5. Click the custom trigger configuration box and select Custom Event.

  6. In the event name box, type dPageView.

  7. Click save in Tag Manager.

After creating the trigger, we need to apply it to the tags we want. This needs to be done for every tag you use on the site to trigger for page view events. In this example, we apply it for Google Analytics Universal, however Google Analytics 4 is the newest version we recommend you use.

  1. In Tag Manager, go to tags.

  2. Create a new tag.

  3. Type a memorable name.

  4. Click the Tag Configuration box and select the tag you want to use. In this case, Google Analytics Universal.

  5. After setting up the tag, click the Triggering box. Choose the custom trigger we created Custom Page View Trigger.

  6. Note

  7. If there’s already the All Pages trigger applied, please delete it. We only need the custom trigger to run.

  8. Select a new variable.

  9. Select Google Analytics Settings.

  10. Type your GA tracking ID, and type a name for your variable at the top.

  11. Select the variable and click Save.

After you have made these changes to Tag Manager, click Submit and then Publish the changes to the live settings.

Considerations for Google Tag Manager

  • This code will only run on the live published site. You will want to make sure you test it on the live version.

  • We have completed extensive testing and the body-end.html section of Developer Mode works for adding the noscript code and default code.

  • Please do not change the ‘dataLayer’ setting from Google Tag Manager, this will break our custom integration 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-XXXX');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->