Set Up Element Tagging in Journey Analytics

Overview

Journey Analytics captures standard web interactions taglessly. Once the Wingify SmartCode is installed and data capture is enabled in Journey Analytics, Wingify automatically tracks core website interactions such as clicks, page visits, and form submissions without requiring custom event setup or developer support.

For information about automatic data capture, see Automatic Data Capture in Wingify Analytics.

Element Tagging builds on automatic data capture by letting you group captured clicks from multiple related elements into named, logical sets.

For example, you can group every Add to Cart button across your website under a single Add to Cart tag. This includes buttons on the homepage, product pages, search results, and so on. Tagging these elements allows you to report on them together without setting up a separate tracking metric for each location.

You can also use Element Tags as filter conditions in Journey Analytics reports to evaluate total conversion volume across similar interactive elements across your site without analyzing each URL individually.

Key Benefits

• Grouping: Analyze clicks from multiple elements as a single group.
• Retroactive analysis: Tag an element today and see its past performance, since Wingify already captured its clicks.
• Continuity across redesigns: When a website redesign changes an element’s selector, you can edit your existing Element Tag to include the new selector path alongside the old one. The Element Tag tracks clicks across both selectors, maintaining continuous historical data without creating gaps in your reports.
• Flexible location scoping: You can set the scope to track the element everywhere, limit tracking to a single URL, or target specific URL patterns like product pages. For more information, see Configure Element Tagging with the Visual Editor.

Prerequisites

• An active Journey Analytics subscription.
• Wingify SmartCode installed on the target website pages.
• Data capture enabled in Journey Analytics. For more information, see Get Started with Journey Analytics.

Data Capture Logic

Wingify records user interaction events using short-path selectors rather than full DOM structures to keep tracking stable.

When you tag an element visually in the Visual Editor, Wingify generates the exact same short-path selector recorded during default data capture. This shared identifier allows Wingify to match your new tag with previously captured raw interaction data and report on it retroactively.

Configure Element Tagging with the Visual Editor

You can tag elements using point-and-click selection or add CSS selector paths manually using the following steps:

Step 1: Launch the Visual Editor

1. From the left navigation menu of the Wingify dashboard, go to Configurations > Elements.
2. Click Create.
3. In the Tag elements visually modal, configure the following:
   • Select Domain: Choose your target domain from the dropdown.
     Enter URL: Enter the specific webpage URL you want to open in the canvas.
   • Device Viewport: Select Desktop, Mobile, or Tablet to choose the viewport layout for loading the page.
4. Click Launch to load your website inside the Visual Editor canvas.

Once the Editor loads, the right panel displays All Tags, which lists any existing tags. The Tag elements and Navigate tabs appear at the top of the panel.

Step 2: Create Tag Elements from the Visual Editor Canvas

1. In the right panel, click Create a Tag to start the Element tag creation workflow.
2. Hover over any element on the canvas and click to select it. The panel automatically displays the element's captured Short path and Selection URL.
   • (Optional) Map to an existing tag: If you want to append this element to an existing tag, click Map to existing tag and choose it from your list.
3. Enter a clear, descriptive Name. For example, Start Free Trial, Checkout CTA, or Contact Sales, and choose an Element type from the dropdown.
   Tip: Toggle on the Show all tagged elements switch to highlight tagged items on the canvas. Elements with multiple tags display a numerical badge, such as 2 tags.
4. For the selected element, choose a Location scope from the following options:
   • Sitewide: To track matching elements across every page on the domain.
   • This page only: To restrict tracking to the page where the element was selected.
   • Specific page groups: To restrict tracking to one or more selected page groups, for example, all product detail pages.
5. (Optional) To add more elements to the same tag on other pages, click the Navigate tab. In this mode, you can navigate to any page you want to tag. Switch to Tag elements mode and continue selecting the elements. Each newly selected element is added to the same Selected Elements list, and you can set its Location scope independently of the others.
6. (Optional) To add elements without using the canvas, click Add selector path manually in the left-panel and enter one or more CSS selector paths, plus a shared Location scope for them. The Visual Editor highlights all matching elements on the canvas to confirm your selection.
   Note: Manually entered CSS selectors do not support retroactive data querying, meaning historical performance data for these selectors is unavailable. When you enter a selector manually, it bypasses automated short-path generation and cannot match the short paths captured in past event logs.

Check that all selected canvas elements are highlighted on the page with matching entries in the Selected Elements list.

Step 3: Save and Confirm Tag Creation

1. Review your configured elements, names, and scopes in the Selected Elements list.
2. Click Save Element at the bottom of the panel.

Once saved, the tag appears under the All Tags tab in the Visual Editor, where you can search by name and see each tag's element type and the number of elements mapped to it.

View and Edit Element Tags

From your Wingify dashboard, go to Configurations > Elements to view your saved tags. Select any tag to view its details across three tabs:

• Definition: Lists the elements mapped to the tag, including each element’s Short path, the URL where it was selected, and its Location scope.
• Metadata: Lists the Name, Domain, Industry (of the domain), Element type, Created by, and Created on.
• Timeline: Lists the changes made to the tag in chronological order.

Update Tags for Redesigned Elements

When a website redesign changes an element’s underlying HTML/CSS selector, you can edit your existing Element Tag to include the new selector path alongside the old one. The Element Tag tracks clicks across both selectors, maintaining continuous report trends without creating data gaps.

To update an Element Tag during a website redesign:

1. In your Wingify dashboard, go to Configurations > Elements, and select the tag.
2. Click Edit and then click Launch to open the redesigned webpage inside the Visual Editor canvas.
3. Select the new element that corresponds to the design update.

4. Keep the legacy definition. Do not delete or overwrite the original element definition. Add the new definition alongside the existing one.

   Note: By maintaining both legacy and new definitions within the same tag, Wingify continuously matches historical report data from the old design alongside live data from the new design.
5. Click Save Element.

For example, suppose your Start Free Trial button originally has one selector, and the website redesign changes its DOM structure, resulting in a new selector.

Instead of creating a new Start Free Trial tag:

• Keep the original element definition.
• Add the redesigned button to the existing Start Free Trial tag.
• The tag can then represent the same CTA across both versions of the website.

Filter Analytics Reports by Element Tags

After creating an Element Tag, you can use it as a filter condition in Journey Analytics reports to evaluate user engagement across aggregated UI components. Filtering reports by an Element tag allows you to analyze total conversion volume across similar interactive elements, such as all Request Demo or Explore For Free CTAs on your site. You can then compare their performance without evaluating each URL individually.

To filter a report using element tags:

1. In Journey Analytics, create or open a report, such as a Metric report or Funnel report, and add an event, such as Click.
2. Click + filter on the event card, then search for and select Element Tag as the property.
3. In the value picker, select one or more element tags, for example, Request Demo or Explore For Free.
4. Click Apply.

The report aggregates clicks across all elements mapped to the selected tags.

Best Practices

• Tag elements you want to analyze: Use Element Tags for important buttons, links, CTAs, navigation items, and other elements you want to track consistently. Use clear, meaningful tag names that describe the element's purpose.
• Use the Visual Editor for retroactive analysis: Elements selected using the Visual Editor reliably match historical data because retroactivity depends on the exact short path Wingify has already captured. However, a Zone (a broad wrapping container selected instead of the specific element) or a selector entered manually is not supported for retroactive matching.
• Keep old definitions when updating a tag: When an element changes after a redesign, do not delete its old definition. Add the new definition alongside the existing one. Removing the old one means losing access to the historical data tied to it. For more information, see Update Tags for Redesigned Elements.
• Know when to use custom events: Element Tags are useful for tracking captured clicks. But highly dynamic websites, where elements load asynchronously or update without page reloads, require a different approach. If selector paths change frequently, or the same selector can point to different elements over time, Element Tags may not provide reliable long-term tracking. 

Element Tags track standard click events. For highly dynamic websites where elements load asynchronously or update without page reloads, track interactions using Custom Events in VWO Data360 instead.

Use custom events instead when:

• Elements change frequently or are generated dynamically.
• The same selector can point to different elements over time.
• You need explicit tracking for a critical user action, such as submitting a checkout form or clicking a payment button.

FAQs

• Why is retroactive data missing for a newly created Element Tag? 
  Retroactive matching depends on the element's short path matching a previously captured short path. It may fail when you use a manually entered selector or tag a broad wrapping container instead of the specific interactive element.
   
• What happens if a tagged element exists on multiple pages under a sitewide scope? 
  Wingify aggregates clicks from every matching instance across the domain under that tag. If you want to see the breakdown by page instead of just the total, add the Page URL dimension to your report. For more information, see Create and Use Metric Reports in Journey Analytics.
   
• Can I add elements to an existing tag without losing historical data? 
  Yes. In the Visual Editor, select Map to existing tag and add the new element(s). Ensure you keep the original selectors active so past data remains linked.