Just Released: Downline Builder Plugin v2 – Install your system in just a few clicks!

DBP Tracking Link Generator Block

by | Jul 5, 2025

This tutorial covers all the major features of the DBP Tracking Link Generator block.

The DBP Tracking Link Generator block is a powerful Gutenberg block that allows users to create custom tracking URLs for funnel pages with personalized tracking IDs. This comprehensive tutorial will guide you through all its features and capabilities.

Getting Started

Adding the Block

  1. In the WordPress editor, click the “+” button to add a new block
  2. Search for “DBP Tracking Link Generator” or find it in the Widgets category
  3. Click to add the block to your post or page

Initial Setup

Important: This block generates tracking URLs for pages tagged with “funnel-page”. Make sure your funnel pages have this tag for them to appear in the dropdown menu.

Core Settings

Content Settings Panel

Button Text

  • Purpose: Text displayed on the generate button
  • Default: “Generate URL”
  • Examples: “Create Link”, “Generate Tracking URL”, “Build Link”

Dropdown Text Options

  • Select Funnel Page Text: Placeholder for dropdown (default: “Select a Funnel Page”)
  • No Funnel Pages Text: Message when no pages found (default: “No Funnel Pages found”)
  • Use Case: Customize messages to match your site’s language and tone

Input Field Settings

  • Tracking Placeholder: Placeholder text for tracking ID field (default: “Enter Tracking ID”)
  • Tracking Required Alert: Alert message when tracking ID is empty (default: “Tracking value is required!”)
  • Tracking URL Label: Label for generated URL (default: “Your Tracking URL:”)

Layout Settings Panel

Stack Fields

  • Purpose: Controls whether fields stack vertically or display side by side
  • Default: Enabled (stacked layout)
  • Stacked: Dropdown and input appear vertically
  • Side-by-side: Dropdown (60%) and input (40%) appear horizontally
  • Mobile: Stacked layout works better for mobile devices

Form Alignment

  • Form Width: Controls the width of the entire form (100%, 600px, etc.)
  • Form Alignment: Left, Center, Right alignment options
  • Button Alignment: Separate alignment control for the generate button

Styling Options

Container Styling Panel

Background & Border

  • Background Color: Set container background color
  • Text Color: Set container text color
  • Border Color: Add border color to container
  • Border Width: Set border thickness
  • Border Radius: Round corners
  • Padding: Internal spacing

Dropdown Styling Panel

Dropdown Colors & Spacing

  • Background Color: Dropdown background (default: #ffffff)
  • Text Color: Dropdown text color (default: #333333)
  • Border Color: Dropdown border color (default: #dddddd)
  • Border Width: Dropdown border thickness (default: 1px)
  • Border Radius: Dropdown corner roundness (default: 4px)
  • Padding & Margin: Control spacing around dropdown
  • Width & Font Size: Dropdown dimensions and text size

Input Field Styling Panel

Input Colors & Spacing

  • Background Color: Input field background (default: #ffffff)
  • Text Color: Input text color (default: #333333)
  • Border Color: Input border color (default: #dddddd)
  • Border Width: Input border thickness (default: 1px)
  • Border Radius: Input corner roundness (default: 4px)
  • Padding & Margin: Control spacing around input field
  • Width & Font Size: Input dimensions and text size

Button Styling Panel

Button Colors & Effects

  • Background Color: Button background (default: #007cba)
  • Text Color: Button text color (default: #ffffff)
  • Border Color: Button border color
  • Dimensions: Width, padding, margin, radius controls
  • Typography: Font size and weight options

Result Display Styling Panel

Generated URL Display

  • Background Color: Result field background (default: #f0f0f0)
  • Text Color: Result text color (default: #333333)
  • Border Color: Result field border (default: #dddddd)
  • Border Width & Radius: Border styling options
  • Padding & Margin: Spacing around result display

How It Works

URL Generation Process

  1. Select Funnel Page: User chooses from dropdown of pages tagged “funnel-page”
  2. Enter Tracking ID: User inputs a custom tracking identifier
  3. Generate URL: Click button to create tracking link
  4. URL Format: page-url?id=username&tracking=tracking-id
  5. Copy Link: Generated URL appears in read-only field for easy copying

URL Parameters

  • id parameter: Automatically includes current user’s username
  • tracking parameter: Custom tracking ID entered by user
  • Example: https://yoursite.com/sales-page?id=john&tracking=campaign-2024
  • Use Case: Track referral sources, campaign performance, affiliate activity

Examples

Basic Link Generator

Configuration:

  • Default text and styling
  • Stacked layout (mobile-friendly)
  • Center alignment
  • 100% width

Use Case: Simple link generator for member dashboards or affiliate tools.

Professional Link Builder

Configuration:

  • Custom text: “Build Your Tracking Link”
  • Container background and border styling
  • Professional color scheme
  • Side-by-side layout for desktop
  • Custom result display styling

Use Case: Branded affiliate portal with professional appearance and advanced tracking capabilities.

Compact Sidebar Generator

Configuration:

  • Stacked layout for narrow spaces
  • Compact padding and margins
  • Smaller font sizes
  • Auto-width button
  • Simple styling for minimal space

Use Case: Widget areas or sidebar placements where space is limited but tracking functionality is needed.

Best Practices

Setup Requirements

  • Funnel Page Tags: Ensure your funnel pages are tagged with “funnel-page”
  • Page Accessibility: Make sure funnel pages are published and accessible
  • User Login: Block works best when users are logged in for username inclusion
  • Tracking System: Have a system in place to utilize the tracking parameters

User Experience

  • Clear Instructions: Provide guidance on how to use tracking IDs effectively
  • Layout Choice: Use stacked layout for mobile, side-by-side for desktop
  • Copy Function: Generated URLs are automatically selected for easy copying
  • Validation: Form validates tracking ID input before generating URLs

Tracking Strategy

  • Naming Convention: Establish consistent tracking ID formats
  • Campaign Tracking: Use tracking IDs to identify specific campaigns
  • Analytics Integration: Connect tracking parameters to your analytics system
  • Performance Monitoring: Track which links generate the best results

Troubleshooting

Common Issues

No Funnel Pages in Dropdown:

  • Check if pages are tagged with “funnel-page”
  • Verify pages are published (not draft or private)
  • Ensure pages are of type “page” not “post”
  • Check spelling of the “funnel-page” tag

URL Not Generating:

  • Ensure both dropdown and tracking ID field are filled
  • Check for JavaScript errors in browser console
  • Verify jQuery is loaded on the page
  • Test with different tracking ID values

Styling Issues:

  • Ensure “Use Custom Style” is enabled for styling options to work
  • Clear browser cache after making styling changes
  • Check for theme CSS conflicts that may override styles
  • Test layout responsiveness on different screen sizes

Advanced Customization

For advanced users who need additional functionality beyond the block options:

  • Use CSS class: .wp-block-downline-builder-plugin-tracking-link-generator
  • Target form: #dbp-tracking-link-form
  • Style dropdown: #dbp-tracking-link-dropdown
  • Style input: #tracking_id
  • Style button: #submit_tracking_id
  • Style result: #tracking_url_display

Add custom CSS to your theme’s style.css or use the WordPress Customizer for advanced styling requirements.