Find and Validate Addresses with GTM

A guide to use Google Tag Manager to publish an address validation tag

Google Tag Manager (GTM) Introduction

With Google Tag Manager:

  • Add value faster - deploy powerful conversion tracking, site analytics, address finder and validation checks without even getting your web team involved. You can enable or disable features with the click of a button, giving you flexibility and full control.
  • Peace of mind - add code snippets to preview features, such as predictive address search, before publishing it to production. This is a speedy way to be assured that your mission-critical site is easy-to-use and reliable.

Addy recommend Google Tag Manager, which is a free, powerful tool trusted by some of the biggest international brands, that allows you to quickly deploy tags and code snippets on your mobile apps or websites to measure traffic, optimise your online marketing and add improvements such as an address finder to the pages you choose.

Managing code and adding new features can be cumbersome and it often takes too long. This can impede your agility to release to the market by weeks or even months, causing your business to miss out on valuable opportunities, data and online sales.

500 FREE completed address fields per month. Busy month? Choose a plan to meet your needs.

Google Tag Manager Installation

If you don't already have GTM on your site, we'd highly recommend adding it by following the installation guide on the Google Tag Manager site or follow the steps below:

  1. Login to GTM and select your site container name

  2. Click on the "ADMIN" tab:

    Google Tag Manager Admin Menu
  3. Click on "Install Google Tag Manager" to view your installation code snippet.

    Google Tag Manager Integration
  4. Ask your web development team to add your GTM script to your site, typically on the header or master layout page.

GTM should now be installed on your website. The next sections provide a step-by-step guide on how to add the address finder widget to your website via GTM.

Create the "Address Lookup and Validation" tag

This section describes how to create a tag in GTM, to add address lookup and validation functionality to address fields.

  1. Use the JavaScript Code Generator to create a code snippet for finding and validating addresses on your website's input fields.

  2. In the Google Tag Manager workspace, click on the "Tag" left menu and click "NEW" to create a tag.

    Google Tag Manager New Tag
  3. Add a title such as "Address Lookup and Validation" and click on "Tag Configuration" to create the tag.

    Address Validation Tag for GTM
  4. Choose the "Custom HTML" tag type.

    Custom HTML tag in Google Tag Manager
  5. In the HTML section, copy and paste the code snippet produced by the JavaScript Code Generator.
    Add the <script type="text/javascript"> header and </script> footer to the script.

    Google Tag Manager Integration
  6. Click on the "Triggering" area to create a new trigger as described in the next section.

Create the "Address Fields" page trigger

This section describes how to create a trigger, which is a configuration to tell GTM which page to include the "Address Lookup and Validation" tag on.

  1. Click on the "Triggering" area and click on the "+" sign in the right corner to create a new trigger.

    Add a trigger in Google Tag Manager
  2. Click on the "Trigger Configuration" area, choose the "Page View" trigger type and select "Some Page Views".

  3. Give the trigger a name such as "Address Fields" or "Checkout Page".

  4. Configure the URL or path that will help GTM to identify your checkout or signup page that contains address fields. The trigger example above will add the "Address Lookup and Validation" tag when the page URL path contains "demo-address-fields". There are more triggering options that you may want to explore to suit your requirements.

    Address Lookup Trigger Configuration
  5. Click "Save" in the top right corner.

  6. Click "Save" in the top right corner to save the tag and trigger configurations.

Preview and test the "Address Lookup and Validation" tag

GTM provides a preview feature, which allows you to see the tag and trigger in action on a production environment by limiting the preview to your browser session. This is an effective way to test new tags without potentially impacting other users.

  1. Click on the "Preview" button to enable the address lookup and validation preview feature.

    Address finder preview
  2. Open a new tab or page in your browser and navigate to your address fields page as configured in the trigger section. When you navigate to your checkout page, the Google Tag Manager configuration panel will show up.

  3. Verify that the "Address Lookup and Validation" tag has fired on the page as shown below.

    Address Finder Preview in GTM
  4. Start typing an address on the web page to verify that address suggestions are showing up as expected.

  5. Go back the GTM page, you can click on "Leave Preview Mode" to remove the preview page when you are visiting your webpage.

    Address Finder Preview in GTM

Publish the "Address Lookup and Validation" tag

  1. Click on the "Submit" button and then on the "Publish" button to deploy the tag. You can add a description to the release.

    Address Finder Publish
  2. Add a descriptive name for the submission such "Addy Release" and click on "Publish" in the top right corner.

  3. Congratulations, your users can now find and validate their address in real-time as shown below:

    Address finder demo

Reverting changes

Follow the steps below to revert or rollback the address lookup functionality.

  1. Click on the "Address Lookup and Validation" tag in GTM, click on the ellipse icon on the right and select "Delete". Save the changes.

    Reverting address validation changes
  2. Click the "Submit" button to publish the changes.

    Address finder NZ publish