With Google Tag Manager:
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.
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:
Login to GTM and select your site container name
Click on the "ADMIN" tab:
Click on "Install Google Tag Manager" to view your installation code snippet.
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.
This section describes how to create a tag in GTM, to add address lookup and validation functionality to address fields.
In the Google Tag Manager workspace, click on the "Tag" left menu and click "NEW" to create a tag.
Add a title such as "Address Lookup and Validation" and click on "Tag Configuration" to create the tag.
Choose the "Custom HTML" tag type.
</script> footer to the script.
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.
Click on the "Triggering" area and click on the "+" sign in the right corner to create a new trigger.
Click on the "Trigger Configuration" area, choose the "Page View" trigger type and select "Some Page Views".
Give the trigger a name such as "Address Fields" or "Checkout Page".
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.
Click "Save" in the top right corner.
Click "Save" in the top right corner to save the tag and trigger configurations.
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.
Click on the "Preview" button to enable the address lookup and validation preview feature.
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.
Verify that the "Address Lookup and Validation" tag has fired on the page as shown below.
Start typing an address on the web page to verify that address suggestions are showing up as expected.
Go back the GTM page, you can click on "Leave Preview Mode" to remove the preview page when you are visiting your webpage.
Click on the "Submit" button and then on the "Publish" button to deploy the tag. You can add a description to the release.
Add a descriptive name for the submission such "Addy Release" and click on "Publish" in the top right corner.
Congratulations, your users can now find and validate their address in real-time as shown below:
Follow the steps below to revert or rollback the address lookup functionality.
Click on the "Address Lookup and Validation" tag in GTM, click on the ellipse icon on the right and select "Delete". Save the changes.
Click the "Submit" button to publish the changes.