Venue Detail Page (VDP)
  • 25 Sep 2024
  • 4 Minutes to read
  • Contributors
  • Dark
    Light

Venue Detail Page (VDP)

  • Dark
    Light

Article summary

Summary

The Venue Detail Page (VDP) is one of the starting points for PrePurchase flow. This allows the fan to view any events available for a particular venue Venues can include Stadiums, Arenas, Theatres etc. The displayed events can be filtered by date or type of events such as Concerts, Sports etc.


Image 2 Image 1

Features

Fans can view all the events happening at a particular venue from one single page. The events tab lists all events that are on sale, the event category can vary from Sports, Concert, Arts and much more. Fans can use the refine results filter to view the event categories of their choice. They can also use the filter to sort events by name/date or only display events during a particular date range at the venue. The Venue details tab provides basic information of the venue address, phone numbers, parking information etc. The seating chart tab shows the seating plan/ stadium map for that Venue. Fans can proceed to purchase tickets at the venue, by selecting the event of their choice.


Note

Using our SDK's requires a valid API Key. If you do not already have one, simply head to the Ticketmaster Developer Portal

Creating an Venue Detail Page (VDP)

To start VDP flow you must provide the Venue ID when initializing PrePurchase SDK.

To start the VDP flow, you'll need a few things: First, you must provide a Venue ID and use it to create a DiscoveryVenue(val venueId : String) instance.

Afterwards, add the DiscoveryVenue instance to your TMPrePurchaseWebsiteConfiguration instance as a parameter.TMPrePurchaseWebsiteConfiguration requires your discoveryVenue instance and marketDomain (US & UK). 

There are optional parameters such as a boolean to control Share Item visibility, Brand Name, Discrete ID and Came From Code, etc if you inspect theTMPrePurchaseWebsiteConfiguration model.

import com.ticketmaster.discoveryapi.enums.TMEnvironment
import com.ticketmaster.discoveryapi.enums.TMMarketDomain
import com.ticketmaster.discoveryapi.models.DiscoveryAbstractEntity
import com.ticketmaster.discoveryapi.models.DiscoveryAttraction
import com.ticketmaster.discoveryapi.models.DiscoveryVenue
import com.ticketmaster.prepurchase.TMPrePurchase
import com.ticketmaster.prepurchase.TMPrePurchaseWebsiteConfiguration
import com.ticketmaster.prepurchase.viewmodel.PrePurchaseSDK

val venueID: String = "82789"

val discoveryVenue: DiscoveryAbstractEntity? = DiscoveryVenue(hostID = venueID)

val tmPrePurchaseWebsiteConfiguration = TMPrePurchaseWebsiteConfiguration(
  discoveryVenue,                                        // required
  TMMarketDomain.US,                                    // required
  ..........                                       // optionals
)

Create a TMPrePurchase instance containing the brand color and apiKey

// Create a TMPrePurchase instance
val tmPrePurchase = TMPrePurchase(
  ContextCompat.getColor(
    this,
    R.color.black
   ),
   apiKey
)

Create a fragment factory, TMPrePurchaseFragmentFactory  to implement interfaces that your app can use to receive useful information from the SDK as you build the VDP flow.

  • The factory uses the following optional listeners:  TMPrePurchaseSharingListener, TMPrePurchaseUserAnalyticsListener, TMPrePurchaseWebAnalyticsListener.
  • The factory has the following required listener so you can handle navigation when PrePurchase has closed and other action items: TMPrepurchaseNavigationListener. This listener has the onPrePurchaseClosed callback that is accessible to you so you can close the activity or do whatever seems best for your app at that moment. Closing the activity that launched PrePurchase in the first place most likely will be your use case, as shown in the code block example below.

Set the factory to the FragmentManager for it to create a Fragment instance.

// NOTE: The code block below will exist in the onCreate() lifecycle method of your Activity

class PrePurchaseNavigationListener(val closeScreen: () -> Unit): TMPrePurchaseNavigationListener {
  .........
  override fun onPrePurchaseClosed() {
    closeScreen.invoke()
  }
}

private val integratorFactory: TMPrePurchaseFragmentFactory by lazy {
TMPrePurchaseFragmentFactory(
   tmPrePurchaseNavigationListener = PrePurchaseNavigationListener() {   // required
      // close the activity in this example
      finish()
   },
    ...........                                                                // optionals
 )
}

supportFragmentManager.fragmentFactory = integratorFactory

Using the TMPrePurchase instance and its getPrePurchaseBundle convenience method, create a bundle with TMPrePurchaseWebsiteConfiguration. This newly made bundle will then be added to TMPrePurchaseFragmentFactory as an argument. Once this is done, the provided fragment instance from the factory may be used to start VDP.

val bundle : Bundle = tmPrePurchase.getPrePurchaseBundle(tmPrePurchaseWebsiteConfiguration)

val fragment = integratorFactory.instantiatePrePurchase(classLoader).apply {
  arguments = bundle
}



supportFragmentManager.beginTransaction()
  .add(android.R.id.content, fragment)
  .commit()




Initialize TMPrePurchaseViewController with a Venue ID. Before creating venue view controller, configure PrePurchase SDK, refer to theCustomize Branding section. Syntax for initializing venue view controller requires venueIdentifier.

//Passing venueIdentifier
TMPrePurchaseViewController.venueDetailsViewController(venueIdentifier: String,
marketDomain: MarketDomain = .US, // Set valid marketDomain based on your region - US or AU or UK etc
enclosingEnvironment: EnclosingEnvironment)


Example:

let viewController = TMPrePurchaseViewController.venueDetailsViewController(venueIdentifier: "82789",
marketDomain: .US, // Set valid marketDomain based on your region - US or AU or UK etc
enclosingEnvironment:.tabBarController)

/// Setting analytics delegate
viewController.analyticsDelegate = self

/// Setting navigation delegate
viewController.navigationDelegate = self


Analytics delegate:

/// Analytics Delegate Methods
public protocol TMPrePurchaseAnalyticsDelegate: AnyObject {
    
    // MARK: User Behavior Analytics
    
    /// user has just shared this ADP/VDP page
    func prePurchaseViewController(_ viewController: TMPrePurchaseViewController,
                                   didShare pageTitle: String,
                                   and pageURL: URL,
                                   to activityType: UIActivity.ActivityType)
    
    // MARK: UAL Webpage Analytics
    
    /// PrePurchase webview has fired a pageView
    func prePurchaseViewController(_ viewController: TMPrePurchaseViewController,
                                   didFirePageView pageView: UALPageView)
}


Navigation delegate:

// Navigation Delegate Methods
public protocol TMPrePurchaseNavigationDelegate: AnyObject {
    
    /// PrePurchase needs to open an EDP (Event Details Page) to possibly make a purchase.
    ///
    /// - Note: Your code needs to initialize and display the Purchase SDK here
    ///
    /// - Parameters:
    ///   - eventIdentifier: Event identifier
    func prePurchaseViewController(_ viewController: TMPrePurchaseViewController,
                                   navigateToEventDetailsPageWithIdentifier eventIdentifier: String)
}



Was this article helpful?