Referrer variable in Google Tag Manager

HTTP Referrer (or HTTP Referer) is a header field in the HTTP protocol that identifies the URL of the webpage that linked to the resource being requested.

It helps servers identify where incoming requests are coming from. It's useful for analytics, logging, and security purposes.

The HTTP Referrer header helps identify where a request is coming from. If a user visits www.collectlo.com/creator, the referrer can tell whether they arrived:

1. From a Google search → The referrer might be something like https://www.google.com/
2. From a Facebook ad → The referrer could be https://www.facebook.com/fbclickid..
3. From an internal link (e.g., from www.collectlo.com/explore) → The referrer would be https://www.collectlo.com/explore
4. Directly (no referrer) → If they typed the URL manually or used a bookmark, the referrer might be empty or "null".

When a user directly enters a URL into their browser's address bar, such as a thank-you page URL, the browser does not have a referring page. Consequently, the Referer header is typically omitted in the HTTP request sent to the server. This means the server receives no information about the user's previous page. E.g. direct URL entries, bookmarks, or links from non-web documents (like PDFs), the Referer header is generally not sent.

When a user navigates from Facebook to your website and lands on a thank-you page, the Referer header in the HTTP request typically indicates that the traffic originated from Facebook. However, due to Facebook's privacy measures, the exact content of the Referer header can vary:

1. Link Shim Redirection: Facebook employs a system called "link shim" to protect user privacy and security. When a user clicks an external link on Facebook, they're briefly redirected through a Facebook URL (e.g., l.facebook.com or lm.facebook.com) before reaching the destination site. This process modifies the Referer header to show l.facebook.com or lm.facebook.com as the referrer, rather than the original Facebook page URL. webmasters.stackexchange.com
2. Direct Referrals: In some cases, especially when users access your site from Facebook's mobile app or a secure (HTTPS) Facebook page to a non-secure (HTTP) page on your site, the Referer header might be omitted entirely due to security restrictions. This absence means your analytics tools may register such visits as "Direct" traffic, lacking referrer information. discourse.snowplow.io

To accurately track conversions from Facebook, consider implementing URL parameters (like UTM parameters) in your links. By appending parameters such as ?utm_source=facebook&utm_medium=social&utm_campaign=campaign_name to your URLs, you can ensure that visitors from Facebook are correctly identified in your analytics, regardless of Referer header modifications or omissions. clickthrough-marketing.com

Additionally, configuring your analytics platform to recognize and group various Facebook referrers (l.facebook.com, lm.facebook.com, m.facebook.com, etc.) under a single source can provide a clearer picture of traffic originating from Facebook. holini.com

By combining URL parameter tracking with proper analytics configuration, you can more effectively monitor user journeys from Facebook to your thank-you page, ensuring accurate attribution of conversions.

In Google Tag Manager (GTM), the Referrer variable captures the URL of the previous page that directed a user to the current page. This information is derived from the document.referrer property in the browser. Utilizing the Referrer variable can provide valuable insights and enhance your tracking capabilities in several scenarios:

1. Tracking Traffic Sources:

• Purpose: Identify the external websites or search engines that are directing traffic to your site.
• Implementation: By analyzing the Referrer variable, you can determine which sources are most effective in driving visitors. For instance, if the referrer URL contains "google.com," it indicates that the user arrived via a Google search.

2. Customizing User Experience Based on Referrer:

• Purpose: Tailor content or promotional offers based on the user's origin to increase engagement.
• Implementation: Set up triggers in GTM that fire specific tags when users come from particular referrers. For example, display a special discount banner for visitors arriving from a partner site.

3. Enhancing Form Submission Tracking:

• Purpose: Determine which pages or sources lead users to submit forms on your site.
• Implementation: Include the Referrer variable in the data sent upon form submission to identify the user's previous page. This is particularly useful when the same form exists on multiple pages, and you want to track which page contributes most to conversions.

4. Filtering Internal Traffic:

• Purpose: Exclude traffic originating from internal pages or specific domains to maintain accurate analytics data.
• Implementation: Create triggers that prevent tags from firing if the Referrer variable matches your own domain or internal network, ensuring that only external traffic is measured.

To understand Component Type and variable configuration, we will take example of let say easemytrip.com

Sure! Here’s a breakdown of each term you mentioned in the context of Component Type and variable configuration:

1. Full URL

• This refers to the complete web address, including the protocol (http or https), domain, path, query parameters, and fragment.
• Example: https://www.easemytrip.com/flights/search?from=DEL&to=MUM&date=2025-03-10 Here: https:// → Protocolwww.easemytrip.com → Domain/flights/search → Path?from=DEL&to=MUM&date=2025-03-10 → Query parameters
• https:// → Protocol
• www.easemytrip.com → Domain
• /flights/search → Path
• ?from=DEL&to=MUM&date=2025-03-10 → Query parameters

2. Format Value

• This setting is used to modify or standardize how a variable's value is stored or displayed.
• Example: If a date is stored as 10-03-2025, it can be formatted as 2025-03-10 (ISO format) for consistency.

3. Change Case to...

• This setting determines how the text case should be modified.
• Common options: Uppercase → Converts all letters to uppercase. (delhi → DELHI)Lowercase → Converts all letters to lowercase. (DELHI → delhi)Title Case → Capitalizes the first letter of each word. (ease my trip → Ease My Trip)Sentence Case → Capitalizes only the first letter of the first word. (book a flight now → Book a flight now)
• Uppercase → Converts all letters to uppercase. (delhi → DELHI)
• Lowercase → Converts all letters to lowercase. (DELHI → delhi)
• Title Case → Capitalizes the first letter of each word. (ease my trip → Ease My Trip)
• Sentence Case → Capitalizes only the first letter of the first word. (book a flight now → Book a flight now)

4. Convert null to...

• null means the value is intentionally empty or missing.
• This setting allows you to replace null with a default value.
• Example: If a user's phone number is null, you can replace it with "Not Provided".
• If a user's phone number is null, you can replace it with "Not Provided".

5. Convert undefined to...

• undefined means the variable has not been assigned any value.
• This setting allows you to replace undefined with a fallback value.
• Example: If an API response does not include a discount percentage, you can replace undefined with "0%".
• If an API response does not include a discount percentage, you can replace undefined with "0%".

6. Convert true to...

• true is a boolean value representing "yes" or "enabled."
• This setting allows you to define how true should be displayed.
• Example: Convert true to "Yes" or "Active" in a UI.true → "Yes"
• Convert true to "Yes" or "Active" in a UI.
• true → "Yes"

7. Convert false to...

• false is a boolean value representing "no" or "disabled."
• This setting allows you to define how false should be displayed.
• Example: Convert false to "No" or "Inactive" in a UI.false → "No"
• Convert false to "No" or "Inactive" in a UI.
• false → "No"

Example with EaseMyTrip.com

If we configure a flight booking component, the following settings might be applied:

If we apply these settings to Protocol in a Component Type, here’s how they work:

1. Protocol

• Definition: The protocol in a URL defines how data is transmitted over the web. Common protocols include:http:// (HyperText Transfer Protocol)https:// (Secure HTTP)ftp:// (File Transfer Protocol)
• http:// (HyperText Transfer Protocol)
• https:// (Secure HTTP)
• ftp:// (File Transfer Protocol)
• Example URLs:https://www.easemytrip.com/ → Protocol: httpshttp://www.example.com/ → Protocol: http
• https://www.easemytrip.com/ → Protocol: https
• http://www.example.com/ → Protocol: http

2. Format Value

• This setting allows you to modify how the protocol is displayed or stored.
• Example:If a website URL is https://www.easemytrip.com/, you might format the protocol as:"HTTPS" (uppercase)"https" (lowercase)"Secure" (custom format)
• If a website URL is https://www.easemytrip.com/, you might format the protocol as:"HTTPS" (uppercase)"https" (lowercase)"Secure" (custom format)
• "HTTPS" (uppercase)
• "https" (lowercase)
• "Secure" (custom format)

3. Change Case to...

• This setting allows you to modify the letter case of the protocol.
• Example:Original: httpsUppercase: "HTTPS"Lowercase: "https"
• Original: https
• Uppercase: "HTTPS"
• Lowercase: "https"

4. Convert null to...

• If the protocol is missing (null), you can replace it with a default value.
• Example:null → "https" (set a default protocol)null → "Not Specified"
• null → "https" (set a default protocol)
• null → "Not Specified"

5. Convert undefined to...

• If the protocol is undefined (not assigned any value), replace it with a fallback value.
• Example:undefined → "http"undefined → "Unknown"
• undefined → "http"
• undefined → "Unknown"

6. Convert true to...

• If a boolean true is used for a protocol (rare case, but possible in configurations), convert it to a readable format.
• Example:true → "https" (assume secure by default)true → "Enabled"
• true → "https" (assume secure by default)
• true → "Enabled"

7. Convert false to...

• If a boolean false is used, replace it with a meaningful protocol or text.
• Example:false → "http" (assume insecure by default)false → "Disabled"
• false → "http" (assume insecure by default)
• false → "Disabled"

Example Using EaseMyTrip.com

Now, let’s break down how these settings apply to Host Name in a Component Type configuration:

1. Host Name

• Definition: The hostname is the domain name in a URL that identifies a website or server.
• Example URLs and Hostnames:https://www.easemytrip.com/flights → Host: www.easemytrip.comhttps://blog.easemytrip.com/ → Host: blog.easemytrip.comhttps://flights.easemytrip.com/ → Host: flights.easemytrip.com
• https://www.easemytrip.com/flights → Host: www.easemytrip.com
• https://blog.easemytrip.com/ → Host: blog.easemytrip.com
• https://flights.easemytrip.com/ → Host: flights.easemytrip.com

2. Strip 'www.'

• This setting removes the "www." prefix from the hostname to keep it clean.
• Example:Before: www.easemytrip.comAfter: easemytrip.com
• Before: www.easemytrip.com
• After: easemytrip.com
• Useful for standardizing domain names for comparison or display.

3. Format Value

• This setting allows modifying the hostname format as needed.
• Example:Convert easemytrip.com to "EASEMYTRIP.COM" (for display)Add "https://" to create a full URL if missing (easemytrip.com → "https://easemytrip.com")
• Convert easemytrip.com to "EASEMYTRIP.COM" (for display)
• Add "https://" to create a full URL if missing (easemytrip.com → "https://easemytrip.com")

4. Change Case to...

• This setting changes the case of the hostname text.
• Example:Uppercase: EASEMYTRIP.COMLowercase: easemytrip.com (default in most cases)Title Case: Easemytrip.Com
• Uppercase: EASEMYTRIP.COM
• Lowercase: easemytrip.com (default in most cases)
• Title Case: Easemytrip.Com

5. Convert null to...

• If the hostname is null (missing), it can be replaced with a default value.
• Example:null → "easemytrip.com" (default hostname)null → "Not Provided"
• null → "easemytrip.com" (default hostname)
• null → "Not Provided"

6. Convert undefined to...

• If the hostname is undefined (not assigned a value), provide a fallback.
• Example:undefined → "unknown.com"undefined → "default.domain"
• undefined → "unknown.com"
• undefined → "default.domain"

7. Convert true to...

• If a boolean true is used for some reason, convert it to a meaningful hostname.
• Example:true → "easemytrip.com"true → "Valid Host"
• true → "easemytrip.com"
• true → "Valid Host"

8. Convert false to...

• If a boolean false is used, replace it with a meaningful text.
• Example:false → "invalid.host"false → "Unknown Host"
• false → "invalid.host"
• false → "Unknown Host"

Example Using EaseMyTrip.com

Now, let's go over how these settings apply to the Port in a Component Type configuration:

1. Port

• Definition: A port is a number in a URL that specifies a communication endpoint on a server.
• Default Ports:80 → Default for HTTP (http://example.com:80)443 → Default for HTTPS (https://example.com:443)Custom Ports: Some services use custom ports like 8080 or 3000 (http://example.com:8080).
• 80 → Default for HTTP (http://example.com:80)
• 443 → Default for HTTPS (https://example.com:443)
• Custom Ports: Some services use custom ports like 8080 or 3000 (http://example.com:8080).
• Example URLs and Ports:https://www.easemytrip.com:443/flights → Port: 443http://blog.easemytrip.com:8080/ → Port: 8080https://flights.easemytrip.com/ → Port: (Default, None)
• https://www.easemytrip.com:443/flights → Port: 443
• http://blog.easemytrip.com:8080/ → Port: 8080
• https://flights.easemytrip.com/ → Port: (Default, None)

2. Format Value

• This setting allows modifying the port number format as needed.
• Example:Convert 443 → "Secure (443)"Convert 8080 → "Alternate (8080)"
• Convert 443 → "Secure (443)"
• Convert 8080 → "Alternate (8080)"

3. Change Case to...

• Ports are numerical values, so changing the case usually doesn’t apply.
• However, if port values are stored as text, you might use:Uppercase: "PORT 443"Lowercase: "port 443"
• Uppercase: "PORT 443"
• Lowercase: "port 443"

4. Convert null to...

• If the port is null (not specified in the URL), replace it with a default value.
• Example:null → "80" (default HTTP port)null → "443" (default HTTPS port)
• null → "80" (default HTTP port)
• null → "443" (default HTTPS port)

5. Convert undefined to...

• If the port is undefined (not assigned a value), provide a fallback.
• Example:undefined → "No Port Assigned"undefined → "Default (80)"
• undefined → "No Port Assigned"
• undefined → "Default (80)"

6. Convert true to...

• If true is used as a port value (which doesn't normally happen), it can be converted into a meaningful value.
• Example:true → "443" (assuming true means secure connection)true → "Port Enabled"
• true → "443" (assuming true means secure connection)
• true → "Port Enabled"

7. Convert false to...

• If false is used as a port value, replace it with a meaningful text or default value.
• Example:false → "80" (assuming false means non-secure HTTP)false → "Port Disabled"
• false → "80" (assuming false means non-secure HTTP)
• false → "Port Disabled"

Example Using EaseMyTrip.com

Now, let’s go over how these settings apply to the Path in a Component Type configuration.

1. Path

• Definition: The path is the part of a URL that comes after the domain name and specifies the location of a resource on the server.
• Example URLs and Paths:https://www.easemytrip.com/flights → Path: /flightshttps://www.easemytrip.com/hotels/delhi → Path: /hotels/delhihttps://www.easemytrip.com/ → Path: / (Root page)
• https://www.easemytrip.com/flights → Path: /flights
• https://www.easemytrip.com/hotels/delhi → Path: /hotels/delhi
• https://www.easemytrip.com/ → Path: / (Root page)

2. Default Pages

• If a URL doesn't have a path (or it’s just /), this setting assigns a default page.
• Example default pages:/index.html/home/default.aspx
• /index.html
• /home
• /default.aspx
• Example:URL: https://www.easemytrip.comWithout Default Page: /With Default Page: /index.html
• URL: https://www.easemytrip.com
• Without Default Page: /
• With Default Page: /index.html

3. Format Value

• This setting allows modifying the path format.
• Examples:Convert /flights/delhi to /flights/Delhi/ (add a trailing slash for consistency)Convert /hotels/delhi to /hotels?city=delhi (change format if needed)
• Convert /flights/delhi to /flights/Delhi/ (add a trailing slash for consistency)
• Convert /hotels/delhi to /hotels?city=delhi (change format if needed)

4. Change Case to...

• This setting changes the case of the path text.
• Example:Lowercase: /flights/delhi → /flights/delhi (default in most cases)Uppercase: /flights/delhi → /FLIGHTS/DELHITitle Case: /flights/delhi → /Flights/Delhi
• Lowercase: /flights/delhi → /flights/delhi (default in most cases)
• Uppercase: /flights/delhi → /FLIGHTS/DELHI
• Title Case: /flights/delhi → /Flights/Delhi

5. Convert null to...

• If the path is null (missing), it can be replaced with a default value.
• Example:null → "/index.html" (assign a default page)null → "/home"
• null → "/index.html" (assign a default page)
• null → "/home"

6. Convert undefined to...

• If the path is undefined (not assigned a value), provide a fallback.
• Example:undefined → "/not-found"undefined → "/default"
• undefined → "/not-found"
• undefined → "/default"

7. Convert true to...

• If true is used as a path value (which doesn’t normally happen), it can be converted into a meaningful path.
• Example:true → "/active"true → "/home"
• true → "/active"
• true → "/home"

8. Convert false to...

• If false is used as a path value, replace it with a meaningful text or default value.
• Example:false → "/inactive"false → "/404"
• false → "/inactive"
• false → "/404"

Example Using EaseMyTrip.com

Now, let’s go over how these settings apply to the Query in a Component Type configuration.

1. Query

• Definition: The query string in a URL contains key-value pairs, typically used for passing parameters to a webpage.
• Example URLs and Queries:https://www.easemytrip.com/flights?source=DEL&destination=MUM&date=2025-03-10Query String: source=DEL&destination=MUM&date=2025-03-10Query Keys: source, destination, datehttps://www.easemytrip.com/hotels?city=Delhi&checkin=2025-02-25Query String: city=Delhi&checkin=2025-02-25Query Keys: city, checkin
• https://www.easemytrip.com/flights?source=DEL&destination=MUM&date=2025-03-10Query String: source=DEL&destination=MUM&date=2025-03-10Query Keys: source, destination, date
• Query String: source=DEL&destination=MUM&date=2025-03-10
• Query Keys: source, destination, date
• https://www.easemytrip.com/hotels?city=Delhi&checkin=2025-02-25Query String: city=Delhi&checkin=2025-02-25Query Keys: city, checkin
• Query String: city=Delhi&checkin=2025-02-25
• Query Keys: city, checkin

2. Query Key

• This refers to specific parameters in the query string.
• Example:URL: https://www.easemytrip.com/flights?source=DEL&destination=MUM&date=2025-03-10Query Keys & Values:source → DELdestination → MUMdate → 2025-03-10
• URL: https://www.easemytrip.com/flights?source=DEL&destination=MUM&date=2025-03-10
• Query Keys & Values:source → DELdestination → MUMdate → 2025-03-10
• source → DEL
• destination → MUM
• date → 2025-03-10

3. Format Value

• Modifies the value of a query parameter.
• Example:Convert source=DEL → source=New DelhiConvert destination=MUM → destination=Mumbai
• Convert source=DEL → source=New Delhi
• Convert destination=MUM → destination=Mumbai

4. Change Case to...

• Adjusts the case of query values.
• Example:Lowercase: city=Delhi → city=delhiUppercase: city=Delhi → city=DELHITitle Case: city=Delhi → city=Delhi (No change)
• Lowercase: city=Delhi → city=delhi
• Uppercase: city=Delhi → city=DELHI
• Title Case: city=Delhi → city=Delhi (No change)

5. Convert null to...

• If a query key is null, replace it with a default value.
• Example:If source=null, convert to source="Unknown"If date=null, convert to date="2025-01-01" (default date)
• If source=null, convert to source="Unknown"
• If date=null, convert to date="2025-01-01" (default date)

6. Convert undefined to...

• If a query key is undefined (not present in the URL), assign a fallback value.
• Example:If city=undefined, convert to city="Not Specified"If checkin=undefined, convert to checkin="TBA"
• If city=undefined, convert to city="Not Specified"
• If checkin=undefined, convert to checkin="TBA"

7. Convert true to...

• If true is used as a query value, replace it with something meaningful.
• Example:membership=true → membership="Active"promo=true → promo="Available"
• membership=true → membership="Active"
• promo=true → promo="Available"

8. Convert false to...

• If false is used as a query value, replace it with something meaningful.
• Example:membership=false → membership="Inactive"promo=false → promo="Unavailable"
• membership=false → membership="Inactive"
• promo=false → promo="Unavailable"

Example Using EaseMyTrip.com

Now, let’s go over how these settings apply to the Fragment in a Component Type configuration.

1. Fragment

• Definition: A fragment (or anchor) is the part of a URL that comes after a # symbol. It is used to navigate to a specific section of a webpage without reloading the page.
• Example URLs with Fragments:https://www.easemytrip.com/flights#booking-sectionFragment: booking-sectionhttps://www.easemytrip.com/hotels#reviewsFragment: reviews
• https://www.easemytrip.com/flights#booking-sectionFragment: booking-section
• Fragment: booking-section
• https://www.easemytrip.com/hotels#reviewsFragment: reviews
• Fragment: reviews

2. Format Value

• Modifies the fragment value to fit a specific format.
• Example:Convert booking-section → Booking SectionConvert reviews → customer-reviews
• Convert booking-section → Booking Section
• Convert reviews → customer-reviews

3. Change Case to...

• Adjusts the case of the fragment text.
• Example:Lowercase: #BookingSection → #bookingsectionUppercase: #BookingSection → #BOOKINGSECTIONTitle Case: #booking-section → #Booking-Section
• Lowercase: #BookingSection → #bookingsection
• Uppercase: #BookingSection → #BOOKINGSECTION
• Title Case: #booking-section → #Booking-Section

4. Convert null to...

• If the fragment is null (missing), replace it with a default value.
• Example:null → "#default-section"null → "#home"
• null → "#default-section"
• null → "#home"

5. Convert undefined to...

• If the fragment is undefined (not assigned a value), provide a fallback.
• Example:undefined → "#top"undefined → "#main-content"
• undefined → "#top"
• undefined → "#main-content"

6. Convert true to...

• If true is used as a fragment value (which doesn’t normally happen), replace it with a meaningful text.
• Example:true → "#enabled"true → "#active"
• true → "#enabled"
• true → "#active"

7. Convert false to...

• If false is used as a fragment value, replace it with a meaningful text.
• Example:false → "#disabled"false → "#hidden"
• false → "#disabled"
• false → "#hidden"

Example Using EaseMyTrip.com