Devhaus Tracking Code
Devhaus Tracking Code is a helper code snippet that helps Webflow developers mainly to implement Segment events and send them to multiple destinations (e.g. Google Analytics, Facebook Pixel, etc.) without having to write any code. It also supports Google Analytics 4 if the client opts out to track events without Segment in place.
Table of Contents
- Devhaus Tracking Code
- Installation and Configuration
- Usage and How to Track Events inside Webflow with Devhaus Tracking Code
- Consent Management
- Local Development
Installation and Configuration
The section below describes the process of installing and configuring the Devhaus Tracking Code snippet inside your Webflow project.
How to Install
- Take note of your Segment source's
writeKey, both for staging and production. - Copy the code below and paste it in the
<head>of the page and replace thesegment-prod-write-keyandsegment-dev-write-keywith your Segment source'swriteKey:
<script
id="devhaus-tracking-code"
defer
src="https://cdn.jsdelivr.net/gh/BuildWithDevhaus/devhaus-tracking-code@2.2.0/dist/index.js"
segment-prod-write-key="YOUR_PRODUCTION_SOURCE_WRITE_KEY"
segment-dev-write-key="YOUR_STAGING_SOURCE_WRITE_KEY"
></script>- In a case where you want to use Google Analytics 4 (GA4) without Segment, you can add the
ga4attribute without thesegment-prod-write-keyandsegment-dev-write-keyattributes. See this section below for more details. - If you want your site to always receive Devhaus Tracking Code updates, you can use the
latesttag instead of theX.X.Xversion number. This will always point to the latest version of the script. NOTE: This is not recommended for production sites since major updates may introduce breaking changes.
<script
id="devhaus-tracking-code"
defer
src="https://cdn.jsdelivr.net/gh/BuildWithDevhaus/devhaus-tracking-code@latest/dist/index.js"
segment-prod-write-key="YOUR_PRODUCTION_SOURCE_WRITE_KEY"
segment-dev-write-key="YOUR_STAGING_SOURCE_WRITE_KEY"
></script>How to Install (v2.0.0 or lower)
- Put your
analytics.jssnippet from Segment to the<head>of the page - (Optional) It is highly recommended that you modify your
analytics.jsfile to include a staging source and a production source. This will allow you to test your events in staging before sending them to production. To do this, you need to add the following and **replace to theanalytics.load()call with the following**:
(window.location.hostname.includes('webflow.io')) {
analytics.load('YOUR_STAGING_SOURCE_WRITE_KEY'); } else {
analytics.load('YOUR_PRODUCTION_SOURCE_WRITE_KEY'); }
</head>- Put the code below also in
<head>after theanalytics.jssnippet; this is the Devhaus Tracking Code snippet:
<script
id="devhaus-tracking-code"
defer
src="https://cdn.jsdelivr.net/gh/BuildWithDevhaus/devhaus-tracking-code@2.0/dist/index.js"
></script>Enable Analytics Tools Support without a CDP
By default, Devhaus Tracking Code is shipped with a CDP implementation considered in mind.
However, you can also use Devhaus Tracking Code without a CDP -- making it acts like a Tag Manager. In this case, you need to make sure that you omit the segment-prod-write-key and segment-dev-write-key attributes.
Below are the analytics tools that you can use:
Usage and How to Track Events inside Webflow with Devhaus Tracking Code
You can read more about the usage and how to track events inside Webflow with Devhaus Tracking Code in the Usage documentation.
Consent Management
You can read more about consent management in the Consent Management documentation.
Local Development
You can read more about the local development setup in the Local Development documentation.
License
Devhaus Tracking Code is licensed under the MIT License. Copyright © 2023, Devhaus Pte. Ltd.