How to add query parameter before #stq= fragment

Helpline
,
1

Google Analytics doesn’t track HTML fragments (the portion of the url after the #). However the Swiftype search url looks like www.example.org/search/#stq=test&stp=1.

The Google Analytics tutorial here: How to use Swiftype with Google Analytics | Swiftype Documentation says to use the stq query parameter. Is this out of date since the stq is a fragment instead of a query parameter?

How can I add the search query parameter so that it can be tracked? Something like:
www.example.org/search/?stq=test#stq=test&stp=1 should do the trick, however Swiftype strips all query parameters out of the search url.

1 Like
2

Hey there,

Great question, and thank you for pointing out that the GA tutorial could use a refresh for clarity. :slight_smile:

With your Google Analytics tracking code installed on your site and when using the WordPress plug-in or the standard JavaScript embed code snippet provided in the Dashboard, capturing and passing the query parameter to GA will function without the need for any additional intervention.

If you’re using our client libraries to implement your Site Search experience, you’ll need to pass along a virtual page view to Google Analytics. They’ve some additional documentation here:

Also, here’s a sample of some JavaScript that you can use as a starting point to parse, convert, and pass that parameter along properly:

var url = window.location.href;
var re = new RegExp("\#stq=(.+)");
var m = url.match(re);


if (m != null) {
    var track = "/search?stq=" + m[1];
    ga('send', 'pageview', track);
} else {
    ga('send', 'pageview');
}

For the above, modify the regex for the re variable as needed, as well as the root path structure for the track variable.

I hope this helps!

NOTE: The above methods and conditions do not apply to GA tracking that is being implemented via Google Tag Manager.

3

Hi All, Another option which would not require coding is to read the fragment in Google Tag Manager and then either append it to the pageview URL and/or create a custom event to track the search query.

4

I’m also having issues integrating Google Analytics. I reached out to customer support but figured it wouldn’t hurt to also tap the community for answers.

I work for the City of Pittsburgh, our website is pittsburghpa.gov. We embedded the Swiftype code right into the website, just like we did with Google Analytics. Yet, the query is not passing through to GA.

This thread is a bit dated, so I want to know if something changed in between then and now. If so, what code or methods in Tag Manager are necessary to successfully integrate these applications.

Thanks in advance,

Todd

5

@mike I want to apply the above js snippet but we deploy GA through Tag Manager. Can you provide alternative solutions specific to Tag Manager?

6

@mike Is there a reason why the above conditions do not apply to GTM? Has there been an update since 2017?

7

The JS code for the virtual pageview would have to be implemented in a custom GTM tag, because the ga() object isn’t accessible from JS on the page itself when GA is deployed as a tag via GTM. I have it on my todo list to make this happen for our installation.

8

As a workaround for GA that is implemented via GTM, can’t one use the New History Fragment designed to track single page applications? This seems essentially do what the above JS does, except GTM does it for you and sends it to GA: Track Single Page App with Google Analytics 4 and Google Tag Manager

As an aside, aren’t anchor tag values essentially the same as fragments? If so, it seems the code above could be simplified using GA’s allowAnchor property: https://www.nichemarket.co.za/blog/track-anchor-tags-urls/