AndroidiOSPluginsAnnouncementsSupport Forum
SDK DocumentationRecipesAnnouncementsSupport Forum
AndroidiOSPluginsAnnouncementsSupport Forum
SDK Documentation

Basic integration with SwiftUI

iOS Classic - Basic integration with SwiftUI

Suggest Edits

📍

This page describes how to integrate Taboola iOS Classic using SwiftUI.

✅

While reading the documentation, take a look at our Sample App.

Initialize Taboola

📘

The initialization steps in this section are the same for Classic and Web integrations.

In your SwiftUI app's main struct, create a TBLPublisherInfo object and initialize Taboola:

import SwiftUI
import TaboolaSDK

@main
struct YourApp: App {
    init() {
        // Initialize a TBLPublisherInfo instance with your unique 'publisherName' and 'appStoreId':
        let publisherInfo = TBLPublisherInfo(publisherName: "<publisherName>", appStoreId: <appStoreId>)
        
        // Initialize Taboola for your application:
        Taboola.initWith(publisherInfo)
        
        // (Optional) Set *global* feature flags:
        Taboola.setGlobalExtraProperties(["<feature flag key>":"<value>"])
        
        // (Optional) Set the desired log level:
        Taboola.setLogLevel(.LogLevelDebug)
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

📘

Params

  • publisherName - An alphanumeric string, provided by Taboola - e.g. "sdk-tester-demo".

    This field is also referred to as the Publisher ID.

  • appStoreId - Your App Store ID, obtained via the App Store Connect dashboard.

    See below.

📘

appStoreId

Your App Store ID - aka Apple ID or iTunes ID - is a unique, numeric identifier that allows Apple to distinguish your app from others.

Passing the appStoreId param allows for improved tracking and attribution and is strongly recommended.

(Requires SDK 3.8.27or higher)

📘

Obtaining your App Store ID

  1. Log in to the App Store Connect dashboard.
  2. Under My Apps, select the relevant app.
  3. Under General, select App Information (left).
  4. Copy your Apple ID (right).

🚧

Initialize Taboola in your app's init() method - or as early as possible within the app lifecycle.

Build Taboola content instances

  1. Create a SwiftUI view to wrap Taboola's UIKit components:
struct TaboolaView: UIViewRepresentable {
    let pageType: String
    let pageUrl: String
    let placementName: String
    let mode: String
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    func makeUIView(context: Context) -> UIView {
        let containerView = UIView()
        return containerView
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        // Update if needed
    }
    
    class Coordinator: NSObject, TBLClassicPageDelegate {
        // Delegate methods will be implemented here
    }
}
  1. Create a Taboola page:
func makeUIView(context: Context) -> UIView {
    let containerView = UIView()
    
    // Create Taboola page
    let page = TBLClassicPage(pageType: pageType, 
                            pageUrl: pageUrl, 
                            delegate: context.coordinator, 
                            scrollView: nil)
    
    return containerView
}

📘

Params

  • pageType - The page type, as provided by Taboola - e.g. "article".
  • pageUrl - A fully-qualified, public URL, with the same content as the current screen.
  • placementName - The placement name, as provided by Taboola - e.g. "Feed without video".
  • mode - The UI Mode ID of the placement, as provided by Taboola - e.g. "thumbs-feed-01".
  1. Using the above page, create 1 or more Taboola units:
func makeUIView(context: Context) -> UIView {
    let containerView = UIView()
    
    // Create Taboola page
    let page = TBLClassicPage(pageType: pageType, 
                            pageUrl: pageUrl, 
                            delegate: context.coordinator, 
                            scrollView: nil)
    
    // Create Taboola unit
    let unit = page.createUnit(withPlacementName: placementName, mode: mode)
    
    // Add unit to container
    containerView.addSubview(unit)
    unit.frame = containerView.bounds
    unit.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    
    return containerView
}

📘

Params

  • placementName - The placement name, as provided by Taboola - e.g. "Feed without video".
  • mode - The UI Mode ID of the placement, as provided by Taboola - e.g. "thumbs-feed-01".
  1. Fetch content:
func makeUIView(context: Context) -> UIView {
    let containerView = UIView()
    
    // Create Taboola page
    let page = TBLClassicPage(pageType: pageType, 
                            pageUrl: pageUrl, 
                            delegate: context.coordinator, 
                            scrollView: nil)
    
    // Create Taboola unit
    let unit = page.createUnit(withPlacementName: placementName, mode: mode)
    
    // Add unit to container
    containerView.addSubview(unit)
    unit.frame = containerView.bounds
    unit.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    
    // Fetch content
    unit.fetchContent()
    
    return containerView
}

A complete example

import SwiftUI
import TaboolaSDK

struct TaboolaView: UIViewRepresentable {
    let pageType: String
    let pageUrl: String
    let placementName: String
    let mode: String
    
    func makeUIView(context: Context) -> UIView {
        let containerView = UIView()
        
        // Create Taboola page
        let page = TBLClassicPage(pageType: pageType, 
                                pageUrl: pageUrl, 
                                delegate: context.coordinator, 
                                scrollView: nil)
        
        // Create Taboola unit
        let unit = page.createUnit(withPlacementName: placementName, mode: mode)
        
        // Add unit to container
        containerView.addSubview(unit)
        unit.frame = containerView.bounds
        unit.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        // Fetch content
        unit.fetchContent()
        
        return containerView
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        // Update if needed
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject, TBLClassicPageDelegate {
        // Implement delegate methods if needed
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            // Your content
            Text("Above Taboola")
            
            // Taboola widget
            TaboolaView(
                pageType: "article",
                pageUrl: "https://www.example.com/articles?id=123",
                placementName: "Feed without video",
                mode: "thumbs-feed-01"
            )
            .frame(height: 300)
            
            // Your content
            Text("Below Taboola")
        }
    }
}

Additional examples

👍

See our Sample App for a complete implementation of Taboola with SwiftUI, including examples of these SwiftUI layouts:

Guidelines

🚧

  1. To maintain a smooth user experience, fetch Taboola content as soon as the view appears.
  2. Do not cache Taboola content. Fetch new content each time the app opens, or the relevant screen is created.

The click event

You can handle Taboola events by implementing the TBLClassicPageDelegate protocol in your coordinator.

If desired, you can intercept the click event, and open organic content directly within your app:

class Coordinator: NSObject, TBLClassicPageDelegate {
    func classicUnit(_ classicUnit: UIView!, 
                    didClickPlacementName placementName: String!, 
                    itemId: String!, 
                    clickUrl: String!, 
                    isOrganic organic: Bool) -> Bool {
        // Insert your code here...
        // Return 'false' if you are handling the click event yourself, or 'true' if you want Taboola SDK to handle the click event.
        // Note: you can override the default behavior for *organic* content only.
        return true
    }
}

🚧

You can override the default behavior for organic content only.

📘

For more information, see Event Handling and didClickPlacementName.

Well Done!

You have completed the basic integration steps!

If everything is working smoothly, take a look at the What's Next section below.

🙈

Taboola content not rendering?

  1. Test with the same params as the sample app, and see if those work.
  2. Still stuck? Submit a question In our forum.

What's next?

  1. For handling clicks and other important events, see Event Handling.
  2. To use advanced options while working with the Taboola SDK, see Advanced Options.
  3. In order to provide personalized recommendations for impressions in the EU and California, make sure to implement GDPR & CCPA respectively.
  4. If you have not already done so, make sure to look at our sample app.
  5. Once you are complete, submit your text app to Taboola for verification - see: App Verification.

🚧

IMPORTANT

Prior to launch, you must provide Taboola with a test app for verification. Skipping this step may result in a significant loss of revenue.

See: App Verification

Updated 7 minutes ago