Segment offers tons of functionality with downstream integrations once you’ve started sending data into Segment, but the first step of setting up event tracking on your website or web app can be a challenge! Segment’s Visual Tagger shortens the process of implementing event tracking on your site by letting you add events without writing any code.
The Visual Tagger is a Chrome Extension created by Segment that allows you to create Segment track events on a website or web app by pointing and clicking on parts of the site’s UI. When you create events in the Visual Tagger, it sends real track events into Segment.
- Ability to send form field values as properties on a
Form Submittedtrack event
Alpha Requirements and Limitations
- The Visual Tagger is only available for websites or web apps. There is no support for mobile apps at this time.
- You must have the Segment snippet for Analytics.js already installed on the website you want to use Visual Tagger for.
- You must use the Google Chrome browser. The Visual Tagger is currently only available as a Chrome Extension.
- MFA and SSO login are currently unsupported. If you use MFA or SSO to log in, Visual Tagger unfortunately won’t work. It is on our roadmap to add support for MFA and SSO login. If you would like for us to prioritize this feature, please email us at firstname.lastname@example.org.
- Support is currently limited for adding properties to
trackcalls. Creating a
trackevent based on
submithandler will add the form fields as properties to the
trackevent. It is on our roadmap to add more support for adding properties to
identifycalls are supported. Other methods are not yet available in Visual Tagger.
- We are currently unable to notify you if tracking breaks due to changes in the website UI.
Visual Tagger Set up
Install the Chrome Extension
- Download and install the Visual Tagger Chrome Extension. The extension is private while the Visual Tagger is in Alpha. Once you install the extension, it appears in the browser in the extensions area.
Install the Segment snippet on your site
Before you start: Make sure you have Workspace Owner or Source Admin privileges, so you can create a new Source.
- Copy the Analytics.js script tag which appears.
- Paste this tag into your website’s code within the
<head>tag. If you’re having trouble with this step, follow the Analytics.js Quickstart Guide.
Enable the Visual Tagger integration
Enable the Visual Tagger integration for the source you created above.
- Navigate to your source settings and click on the Analytics.js tab.
- Accept the alpha terms and toggle to enable/disable the integration.
Tag Events Using Visual Tagger
Go to your site in your browser window.
- Click Segment Logo in the Chrome toolbar, and log in to your Segment account.
- Click Enable Tagger.
In the white bar that appears at the bottom of the screen, click Event Tagger.
Click Tag an Event and mouse over parts of the site. The mouse highlights components that you can add an event tag to.
- Click a component to open the Tag Creation panel, where you can adjust the event tag’s configuration. For each event, there are the following configuration options:
- Selector: The CSS selector that the event will be added to. If you are unsure whether or not the right selector has been chosen (or you need to go up a level in the elements tree to a parent element), click on the “Elements” dropdown where you can explore the tree.
- URL: The page that the event should be fired from
- Trigger: What user action should trigger the event. Currently, we support:
click- when a user clicks on an element
focus- when a user’s mouse enters a form field
blur- when a user exits a form field that was focused on
submit- when a user submits a form
- Event Name What the event should be named. We recommend that you follow the Segment Spec for standard naming conventions.
- When you’re satisfied with the event details, click Save to create the event. User interactions with your site start sending events into Segment as soon as you save the event. To test that events are working, refresh the page.
- Verify that events are appearing as expected by interacting with the element you tagged, and checking the Debugger in your Segment Workspace for the expected event call. Events added to your site using the Visual Tagger have a
contextproperty in the event payload that says
"visual_tagger" : true. You can use this in the Keywords field to filter the Debugger contents to only show Visual Tagger events.
All events that you create in Visual Tagger appear in the Tagged Events panel. Mouse over any existing events to highlight the element that the tag is associated with.
- You can edit and delete tags as needed by clicking the (…) link at the end of each event row.
- If the tagging panel covers an element that you want to tag, click the button in the upper right to move the panel to the other side.
- You can deactivate the Visual Tagger extension or log out by clicking the gear icon in the lower right corner.
Does the Visual Tagger impact my site or app’s performance?
The Visual Tagger integration has very minimal negative impact to your site’s performance, because it installs a single event handler that makes an asynchronous call to Segment when a tag’s event is invoked. The integration makes an initial request that takes the same amount of time required to load Analytics.js, and it is cached for subsequent requests.
However, adding a large number of tags to your site could potentially impact your site’s performance. To guard against this we limit the number of tags you can add using Visual Tagger to 99 while the Visual Tagger is in alpha.
How many events can I create with Visual Tagger?
Currently, you can create up to 99 events with the Visual Tagger.
Are events applicable to specific URLs? Or are we able to match on URL patterns?
Currently, Visual Tagger only supports direct string matching on URLs. More flexibility, including matching on URL patterns, is on our roadmap.
Does the Chrome extension work with dynamically generated elements or Single Page Applications?
Yes. The Chrome DOM is queried on runtime, so you can track dynamically generated elements like modals (for example) using the Visual Tagger.
Once the Visual Tagger supports properties, can I grab info from the data layer that’s not visually on the page?
In the short term, only information that is visually present on the page will be available for use in the Visual Tagger. We’re considering implementing a data layer as part of our roadmap.
How can I tell which events were created using the Visual Tagger, versus those which were implemented using code?
Events that were added using the Visual Tagger (as opposed to in code) have a
context property in the event payload that says
"visual_tagger": true. Events not implemented using the Visual Tagger do not have this property.
If I have MFA or SSO enabled on my Segment account, can I login and use Visual Tagger?
Visual Tagger does not support accounts that have MFA or SSO enabled to login into the extension. We are planning to add MFA support before the General Availability launch.
When will the Visual Tagger be Generally Availabile, have standard support and fully stable releases?
General Availability launch is planned for Fall of 2019.
Alpha Product Terms & Conditions
Segment cannot make commitments around warranties, support, service levels, etc. and will not be liable for any loss of use, lost or inaccurate data or failure of security mechanisms in connection with your use of this or other alpha products, until we release the feature to general availability.
In particular, this means that events instrumented via Visual Tagger may be less reliable and prone to breakage than standard Segment track events instrumented via code.