How you can guardedly Migrate from Hard Coded Analytics to Google Tag Manager

Google Tag Manager offers a highly sophisticated solution for quickly adding tracking which is specific to marketing, without cluttering up source code or backlogs. The process isn’t too simple, to be fair, for a certain level of technical expertise is needed and security concerns are often raised. However, the benefits of a much better and more agile data collection outweigh these potential roadblocks.

Migrating a very large site to Google Tag Manager can pose some serious challenges: if done incorrectly, data collection can stop while the code is switched. It might even become corrupted by conflicting code, or worse, cease altogether. The desired outcome of this process is that the in Google Analytics remains constant, without any disruption when you switch over. Here’s how you can switch over to Google Tag Manager easily, safely and for better.

1. Creating New Property for a new implementation

    • The first step to a safe migration is to create a new “Property” in your Google Analytics account.

  • Next, you must copy all the configurations from your primary “Property” and “View”.
  • If you’re currently using Google Analytics Classic (that is, if your code uses the push([ … ]); syntax), you will also be migrating to Google Universal Analytics.

2. Creating sign up for a Google Tag Manager account

  • In case you haven’t done this already, you should sign up for an account at tagmanager.google.com. On signing up, create a new container and add the Google Tag Manager snippet to your site.

    • This should be ideally placed immediately after the opening tag and should not be nested in another HTML element while on some browsers, having an iframe in the <head> could lead to glitches,which is why GTM is placed in the body.
    • If placing the tag within the body is not feasible, place the <noscript> section of the snippet in your footer and the <script> section of the snippet as close to the top of your <head> as possible.

Google Tag Manager

  • Now, select a “New Variable” in the Google Tag Manager Interface. You must now enter the Google Analytics Tracking ID in the “Variable Configuration” screen.
  • You must leave the Cookie Domain value at “Auto” in case there are no previously deployed Google Analytics tags on your website via js or from Tag Manager.
  • However, if these tags are already set up in your site or in your Tag Manager, you must confirm that the “Cookie Domain” value is consistent.
  • In case you need additional settings such as custom fields, custom dimensions, custom metrics or cross domain tracking, you can click on “More Settings” to configure the fields relevant to you. All that is left now is to click “Save”.
  • You will now be able to track page views in two Properties; one from your on-page code, and the other from your Google Tag Manager container.

3. Locate other tracking Hard coded on your site

  • In this step, we are looking for things such as “Events” that track user interactions, as well as more crucial things like “Ecommerce Tracking”.
  • Most IDEs and text editors will allow you to access all of the files involved in your site or application.
  • Search for push( if you’re using Classic code) or ga( if you’re using Universal Analytics code).
  • Map out every instance of on-page tracking on your site, what it does, and when it fires.

4. Recreate this tracking in Google Tag Manager

  • Recreate all of the other tracking you discovered hard coded on your site, in Google Tag Manager. Information sent to Google Analytics can be replicated using the in-built Universal Analytics tag.
  • You might happen to have custom JavaScript to help track certain events, such as PDF downloads. These custom scripts can often be replaced using Triggers, for instance, a “Click” trigger that is enabled on all pages and fires when the {{Click URL}} contains “pdf”.
  • The objective here is to have both properties receive identical tracking, with your “Test Property” receiving its hits from Google Tag Manager.

5. Data collection and verification

  • It is important to remember that you can use the “Preview” feature to test as you go, while you monitor your live site to ensure that your tags are firing at appropriate times.
  • Publish the Google Tag Manager container on your site once all tracking has been duplicated in this container.
  • After this, collect data for a few days, and then compare major numbers between your old Property and your test Property. Assess metrics such as:
  1. Users
  2. Pageviews
  3. Sessions
  4. Bounce Rate
  5. Conversion Rate
  6. Goals/Transactions
  • These numbers should be within a range of 1-2% with respect to each other, since they will not match exactly. However, if they appear to be out of sync, you should investigate your implementation and see if you can spot the deviations.
  • Setting the “Advanced Configuration” -> “Debug Mode” to {{Debug Mode}} will cause Google Analytics to print detailed information about the hits it is sending to the “Developer Console”.
  • If you discover discrepancies, continue to test until they are resolved.

5. Remove on-page code & switch Google Tag Manager to using production UA Number

Once your “test Property” data matches what you see in your ‘production Property’, it is time to do away with the old code from the page.

  • First, create a new “Data Layer Variable” in Google Tag Manager.  and then set the Data Layer Variable Name field to the same thing.

  • Next, change your Google Analytics UA number from a Constant to a Lookup Table Variable. select Data Layer variable name set in previous step  as the Input Variable. Add one row and set the input to “true”.
  • In the “Output” field, enter in the UA number of your original on-page Property (UA-XXXXXX-YY in the example below).
  • Finally, check the “Set Default Value” box and enter in the UA number of your testing Property(UA-XXXXXX-YZ  for example).
  • You can now publish your container. At this point, your “Test Property” will still be receiving data.
  • Next, replace the old on-page GA snippet with the one below, and remove any other on-page code left on the site, simultaneously. The snippet below must be placed above the Google Tag Manager snippet, without which this method will not work.You can now push your changes into production. Google Tag Manager will begin to fire tracking pixels to your production Google Analytics account as soon as it detects the Data Layer Variable name set in previous step. This layer will be detected only if the GA code has been removed. This prevents any out-of-sync page loads from corrupting your data, either by firing both, or neither.After a few days, when you have surely eliminated the old code from each and every page on your site, you can change your “GA Property ID Variable back” to a Constant, and this time, you can set it to your “Production UA Number”, after which you can publish a new version of your container. You can then remove Data Layer Variable name set in previous step .Last but not least, make sure you add an annotation to your Google Analytics, in order to mark the transition!

 

Leave a reply