Knowledge Base Search

Popular Search shortcodesearchcustomizationcategorymarker
View Categories

Agile Store Locator – Google Tag Manager Integration Guide

Table of Contents

Agile Store Locator (ASL) supports integration with Google Tag Manager (GTM) for advanced event tracking of your store locator interactions.

With GTM, you can send key user interactions from your store locator directly to Google Analytics 4 (GA4) or any other connected service—without modifying your core website code.

What This Integration Does #

By following this guide, you’ll track the following events in GTM:

  • Search events
  • Store selection (map/marker clicks)
  • Store selection (sidebar/list clicks)
  • Direction clicks
  • Email link clicks (available since v4.11.19)
  • Phone link clicks (available since v4.11.19)

Each event automatically pushes relevant store details into GTM’s dataLayer, so you can analyze user interactions in Google Analytics.

How It Works #

Agile Store Locator exposes a JavaScript event hook called asl_event_hook. You can add this function to your site to automatically push event data to GTM’s dataLayer.

When a visitor performs an action—like searching, selecting a store, or clicking email/phone links—your custom asl_event_hook will send structured data to GTM.

You then configure GTM to trigger Google Analytics events based on these pushes.

Step 1 – Add the Google Tag Manager Snippet #

First, ensure the GTM container code is installed on your site. Google Tag Manager provides you with code like:

<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<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) -->

Replace GTM-XXXXXXX with your container ID.

Add this above the closing </head> tag and immediately after the opening <body> tag of your site.

Step 2 – Add the ASL Event Hook Script #

Next, add the following JavaScript to your site. You can place it in your theme’s footer, or enqueue it via your CMS or plugin.

This script listens for ASL events and pushes them to dataLayer for GTM:

<script type="text/javascript">
function asl_event_hook(_event) {
  if (!_event || !_event.type) return;

  // 1- SEARCH EVENT
  if (_event.type === 'search') {
    var active_filters = (asl_view.featureFilter.array_ || []).map(function(cat) {
      return cat.name_;
    }).join(',');

    dataLayer.push({
      'event': 'asl_search_event',
      'search_type': 'Address',
      'search_filters': active_filters,
      'address_searched': _event.data.search_text
    });
  }

  // 2- SELECT EVENT (Store list / marker click)
  else if (_event.type === 'select') {
    var store = _event.data || {};
    var category_names = (store.categories || []).map(function(cat) {
      return cat.name;
    }).join(',');

    dataLayer.push({
      'event': 'asl_store_selected',
      'store_id': store.id,
      'store_title': store.title,
      'store_street': store.street,
      'store_city': store.city,
      'store_state': store.state,
      'store_postal_code': store.postal_code,
      'store_country': store.country,
      'store_lat': store.lat,
      'store_lng': store.lng,
      'store_phone': store.phone,
      'store_email': store.email,
      'store_website': store.website,
      'store_categories': category_names,
      'store_link': store.link
    });
  }

  // 3- LIST CLICK SELECT EVENT
  else if (_event.type === 'asl_store_select_click') {
    var store = _event.data || {};
    var category_names = (store.categories || []).map(function(cat) {
      return cat.name;
    }).join(',');

    dataLayer.push({
      'event': 'asl_store_select_click',
      'store_id': store.id,
      'store_title': store.title,
      'store_city': store.city,
      'store_state': store.state,
      'store_country': store.country,
      'store_phone': store.phone,
      'store_email': store.email,
      'store_categories': category_names
    });
  }

  // 4- EMAIL CLICK EVENT (available since v4.11.19)
  else if (_event.type === 'asl_email_click') {
    var store = _event.data || {};

    dataLayer.push({
      'event': 'asl_email_click',
      'store_id': store.id,
      'store_title': store.title,
      'store_email': store.email
    });
  }

  // 5- PHONE CLICK EVENT (available since v4.11.19)
  else if (_event.type === 'asl_phone_click') {
    var store = _event.data || {};

    dataLayer.push({
      'event': 'asl_phone_click',
      'store_id': store.id,
      'store_title': store.title,
      'store_phone': store.phone
    });
  }

  // 6- DIRECTION CLICK EVENT
  else if (_event.type === 'direction') {
    var store = _event.data || {};

    dataLayer.push({
      'event': 'asl_direction_click',
      'store_id': store.id,
      'store_title': store.title,
      'store_street': store.street,
      'store_city': store.city,
      'store_state': store.state,
      'store_postal_code': store.postal_code,
      'store_country': store.country,
      'store_lat': store.lat,
      'store_lng': store.lng
    });
  }
}
</script>

Step 3 – Set Up Google Tag Manager #

Once the asl_event_hook is on your site, Google Tag Manager will receive events in its dataLayer.

You can now configure GTM to send these events to Google Analytics 4.

3.1 – Create Data Layer Variables #

In GTM:

  1. Go to Variables
  2. Click New > Data Layer Variable
  3. Create variables for:
  • store_id
  • store_title
  • store_street
  • store_city
  • store_state
  • store_postal_code
  • store_country
  • store_lat
  • store_lng
  • store_phone
  • store_email
  • store_website
  • store_categories
  • store_link
  • search_type
  • search_filters
  • address_searched

These variables let GTM pull data from the dataLayer pushes.

3.2 – Create Custom Event Triggers #

Next, create a Custom Event Trigger for each ASL event type:

Event Names to use:

  • asl_search_event
  • asl_store_selected
  • asl_store_select_click
  • asl_email_click (available since v4.11.19)
  • asl_phone_click (available since v4.11.19)
  • asl_direction_click
  1. Go to Triggers
  2. Click New > Trigger Type: Custom Event
  3. Enter the Event Name (e.g. asl_search_event)

Repeat for each event.

3.3 – Create GA4 Event Tags #

For each trigger:

  1. Go to Tags
  2. Click New > Tag Type: Google Analytics: GA4 Event
  3. Select your GA4 Configuration Tag
  4. Enter an Event Name (e.g. locator_search, store_selected, etc.)
  5. Add Event Parameters from your Data Layer Variables

Example for asl_email_click:

  • Event Name: store_email_click
  • Parameters:
    • store_id
    • store_title
    • store_email

Example for asl_search_event:

  • Event Name: locator_search
  • Parameters:
    • search_type
    • search_filters
    • address_searched

Link the appropriate Custom Event Trigger to each Tag.

3.4 – Publish Your Container #

  1. Click Submit in GTM
  2. Add a Version Name (e.g. “ASL Events Integration”)
  3. Click Publish

Your site is now tracking ASL events via GTM!

Important Disclaimer #

Agile Store Locator’s Google Tag Manager integration only pushes event data into the website’s dataLayer.

We do not configure, debug, or manage your Google Tag Manager container, triggers, or Google Analytics setup.

If your GTM or Google Analytics environment does not receive or record these events as expected, it is your responsibility to:

  1. Ensure your GTM container is correctly installed on your website
  2. Verify that your triggers, variables, and tags are properly configured
  3. Debug GTM using built-in tools like the Preview mode

Agile Store Locator support does not include customizing or troubleshooting Google Tag Manager or Google Analytics implementations.

Our plugin guarantees only that it will send the event data to the dataLayer in a standard format.

Did you find it useful?