Setting up URL Replacement Tags
In this help article, we will explain what the URL replacement tags are and how to use them on your website.
Query parameters are a defined set of parameters attached to the end of a URL. They are extensions of the URL that are used to help define specific content or actions based on the data being passed.
The query params are added to the end of a URL, after the ? which is followed immediately by a query parameter, e.g., ?utm_source=google_ads
If there are more than one param, they need to be united with & e.g.,
?utm_source=newsletter&utm_medium=email.
Personalization: in the email we can send a link to a website made with SpreadSimple with a UTM tag or other param, so our customer will be addressed by name or, for example, the website title will include the niche name or the particular segment.
Tracking the website sources (for example, add UTM tags to the order data to track and analyze the sources where the customer came from).
Pass a pre-defined value as a URL parameter to use it as the additional checkout data (a real-world example: a cafe where the tables have QR codes so the visitors can scan the codes and make an order that will automatically include the table number).
Go to the Add-ons Tab -> URL Replacement tag add-on and switch the Enable toggle on.
Enable the option to store the utm_ and var params in browser (if this option is disabled, both types of params will be lost after the page is refreshed)
Select the storage type.
Session-only means that the query params (replacement tags) will be stored only during the session on the website. If the user leaves the website and then comes back again, the params won’t work as the URL tags won’t be stored and the default value (if there’s one) will be displayed.
This type will work best for cases similar to QR table codes in cafes that we described above when the visitors can switch the tables at any moment and there’s no need to store our tag longer than a session.
Persistent means that the query params (replacement tags) will be kept for a long time until the user clears cookies.
Select whether you want to remove the UTM and var params from the URL (sometimes it can be very useful to hide them — but it is up to you).
And you can also enable the debug mode — with this mode on you will be able to see your stored UTM tags and var params in the Dev Console even if they are removed from the URL.
Enable the add-on and select the necessary options.
Open your website in a new tab.
Add a var param, eg. var_name=John, and refresh the website.
Please note that you can use only the params that start with var_ or utm_
And now you can enable the Debug mode and open the Dev console to check if our param is there.
It means that the param was removed from the URL but still stored — just the way we configured our settings.
Now you can use this tag to give your customers a personalized experience (by sharing the URL that includes the necessary tag in an email or via messenger).
For example, you can add the customer's name to the website subtitle in the Page subtitle section. To do that, you need to go to the Design Tab -> Page subtitle (we use this area just to give you an example and you can see the entire list of areas where you can add the URL replacement tags in the end of this article) and add some text and the tag var_name (and a default value friend):
Then you need to save the changes and refresh the website page to check the result:
And we can easily add another var_name to give another customer their personalized experience:
Another use case — we have a delivery service in New York and we segment our customers by the boroughs and we can show the certain borough to all those segments:
And it doesn't have to be the Page subtitle only. You can add this URL tag to any area on the Home page that supports markdown (Text before cards, Text after cards, Footer) and others.
Please note that you won't be able to see the tags in the preview mode, only on the published website.
Though the analytics tools will do a better job of tracking the visit sources, we can also use the URL Replacement Tags add-on for this purpose.
In this case, we will add the UTM tags to see them in our orders notifications
So we add ?utm_source=google_ads to our website URL:
Then we check it in the Dev console:
And then we add the tag to our Email notifications template (Checkout Tab -> Email notifications). We can also add unknown for the undefined sources.
This way, if a customer came through the link that had this UTM tag, and made the purchase — this will be reflected in the email notification.
This can work even if the customer visited several pages and this query param (our UTM tag) was removed from the URL, but for that you will need to set the Storage type to Persistent.
Let’s imagine that we have a cafe and we use our website as a digital menu. Each cafe table has its own QR code that a visitor can scan and be redirected to our menu website. Their table number can be reflected on the website and passed to the waiters among the order.
Check this in action:
To implement this scenario:
We select Session-only as the Storage type in our add-on settings.
Then we add the table number as a query param to the website URL. The param looks like this: var_table=12
Then we can add the replacement tag to the Home page Intro:
And now when we enter the website using our link with the hidden param, we will see our table number:
We also want to add the table number to the order without making our guests enter it manually. To pass the table number among other order data we need to add our replacement tag to the email notification template like this:
We can also add this to the order receipt.
And to the WhatsApp message template...
… as well as to the checkout form (you will need to create a custom form field first)
And we can add as many params as we need.
So after entering the website by using our link with the hidden param, the visitor will get this:
Correspondingly, this information will be reflected in the order form.
And for our cafe case: there are many services that allow creating a QR code from a URL that we can print and put on the table in our cafe.
Please note that the replacement tags can not be added to your Google Sheets content, only to the certain areas on your website and the message templates of these add-ons:
Title
Subtitle
Website headline (Design Tab -> Header)
Home page content
Footer
Content pages
Email notifications
Order receipts
Checkout form (custom form fields) and cart preview
Thank you page
WhatsApp add-on
External Action Checkout add-on
What are the URL query params:
Query parameters are a defined set of parameters attached to the end of a URL. They are extensions of the URL that are used to help define specific content or actions based on the data being passed.
The query params are added to the end of a URL, after the ? which is followed immediately by a query parameter, e.g., ?utm_source=google_ads
If there are more than one param, they need to be united with & e.g.,
?utm_source=newsletter&utm_medium=email.
Possible use cases:
Personalization: in the email we can send a link to a website made with SpreadSimple with a UTM tag or other param, so our customer will be addressed by name or, for example, the website title will include the niche name or the particular segment.
Tracking the website sources (for example, add UTM tags to the order data to track and analyze the sources where the customer came from).
Pass a pre-defined value as a URL parameter to use it as the additional checkout data (a real-world example: a cafe where the tables have QR codes so the visitors can scan the codes and make an order that will automatically include the table number).
Setting up the URL Replacement tag add-on:
Go to the Add-ons Tab -> URL Replacement tag add-on and switch the Enable toggle on.
Enable the option to store the utm_ and var params in browser (if this option is disabled, both types of params will be lost after the page is refreshed)
Select the storage type.
Session-only means that the query params (replacement tags) will be stored only during the session on the website. If the user leaves the website and then comes back again, the params won’t work as the URL tags won’t be stored and the default value (if there’s one) will be displayed.
This type will work best for cases similar to QR table codes in cafes that we described above when the visitors can switch the tables at any moment and there’s no need to store our tag longer than a session.
Persistent means that the query params (replacement tags) will be kept for a long time until the user clears cookies.
Select whether you want to remove the UTM and var params from the URL (sometimes it can be very useful to hide them — but it is up to you).
And you can also enable the debug mode — with this mode on you will be able to see your stored UTM tags and var params in the Dev Console even if they are removed from the URL.
How to use URL Replacement tags on your website
To personalize a website experience
Enable the add-on and select the necessary options.
Open your website in a new tab.
Add a var param, eg. var_name=John, and refresh the website.
Please note that you can use only the params that start with var_ or utm_
And now you can enable the Debug mode and open the Dev console to check if our param is there.
It means that the param was removed from the URL but still stored — just the way we configured our settings.
Now you can use this tag to give your customers a personalized experience (by sharing the URL that includes the necessary tag in an email or via messenger).
For example, you can add the customer's name to the website subtitle in the Page subtitle section. To do that, you need to go to the Design Tab -> Page subtitle (we use this area just to give you an example and you can see the entire list of areas where you can add the URL replacement tags in the end of this article) and add some text and the tag var_name (and a default value friend):
Then you need to save the changes and refresh the website page to check the result:
And we can easily add another var_name to give another customer their personalized experience:
Another use case — we have a delivery service in New York and we segment our customers by the boroughs and we can show the certain borough to all those segments:
And it doesn't have to be the Page subtitle only. You can add this URL tag to any area on the Home page that supports markdown (Text before cards, Text after cards, Footer) and others.
Please note that you won't be able to see the tags in the preview mode, only on the published website.
To track the visit sources
Though the analytics tools will do a better job of tracking the visit sources, we can also use the URL Replacement Tags add-on for this purpose.
In this case, we will add the UTM tags to see them in our orders notifications
So we add ?utm_source=google_ads to our website URL:
Then we check it in the Dev console:
And then we add the tag to our Email notifications template (Checkout Tab -> Email notifications). We can also add unknown for the undefined sources.
This way, if a customer came through the link that had this UTM tag, and made the purchase — this will be reflected in the email notification.
This can work even if the customer visited several pages and this query param (our UTM tag) was removed from the URL, but for that you will need to set the Storage type to Persistent.
To pass a pre-defined value as a URL parameter to use it as the additional checkout data
Let’s imagine that we have a cafe and we use our website as a digital menu. Each cafe table has its own QR code that a visitor can scan and be redirected to our menu website. Their table number can be reflected on the website and passed to the waiters among the order.
Check this in action:
To implement this scenario:
We select Session-only as the Storage type in our add-on settings.
Then we add the table number as a query param to the website URL. The param looks like this: var_table=12
Then we can add the replacement tag to the Home page Intro:
And now when we enter the website using our link with the hidden param, we will see our table number:
We also want to add the table number to the order without making our guests enter it manually. To pass the table number among other order data we need to add our replacement tag to the email notification template like this:
We can also add this to the order receipt.
And to the WhatsApp message template...
… as well as to the checkout form (you will need to create a custom form field first)
And we can add as many params as we need.
So after entering the website by using our link with the hidden param, the visitor will get this:
Correspondingly, this information will be reflected in the order form.
And for our cafe case: there are many services that allow creating a QR code from a URL that we can print and put on the table in our cafe.
Where to add the replacement tags
Please note that the replacement tags can not be added to your Google Sheets content, only to the certain areas on your website and the message templates of these add-ons:
On website:
Title
Subtitle
Website headline (Design Tab -> Header)
Home page content
Footer
Content pages
Email notifications
Order receipts
Checkout form (custom form fields) and cart preview
Thank you page
In the add-ons (in message templates)
WhatsApp add-on
External Action Checkout add-on
Updated on: 06/03/2023
Thank you!