English

简体中文

English

简体中文

Theme

H5 Preparation ​

Development Environment Requirements ​

  • Node.js: 12.0 or higher
  • npm: 6.0 or higher
  • Modern browsers: Chrome, Firefox, Safari, Edge (latest versions)
  • HTML5: Basic HTML5 knowledge
  • JavaScript: ES6+ knowledge

Project Configuration ​

1. Add Dependencies ​

Method 1: CDN Integration ​

Add the following script tag to your HTML file:

html
<!-- UJU H5 SDK -->
<script src="https://sdk.ujusdk.com/h5/uju-ad-sdk.min.js"></script>

Method 2: npm Integration ​

Install the SDK via npm:

bash
npm install uju-h5-sdk --save

Then import it in your JavaScript file:

javascript
import UjuAdSDK from 'uju-h5-sdk';

2. Configure HTML ​

Add necessary configurations to your HTML file:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UJU H5 Demo</title>
    <!-- UJU H5 SDK -->
    <script src="https://sdk.ujusdk.com/h5/uju-ad-sdk.min.js"></script>
</head>
<body>
    <!-- Ad containers -->
    <div id="banner-ad" style="width: 320px; height: 100px;"></div>
    <div id="interstitial-ad"></div>
    <div id="rewarded-video-ad"></div>
    
    <script>
        // Initialize SDK
        window.onload = function() {
            initializeUjuSDK();
        };
        
        function initializeUjuSDK() {
            const config = {
                appId: "YOUR_APP_ID",
                appKey: "YOUR_APP_KEY",
                isDebug: true
            };
            
            UjuAdSDK.init(config, function(success, error) {
                if (success) {
                    console.log("UJU SDK initialized successfully");
                    // SDK initialized successfully, can start loading ads
                } else {
                    console.error("UJU SDK initialization failed:", error);
                }
            });
        }
    </script>
</body>
</html>

3. Configure CORS ​

Ensure your server has proper CORS configuration to allow requests to UJU's ad servers:

javascript
// Example CORS configuration for Express.js
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

SDK Initialization ​

Initialize the SDK in your JavaScript file:

javascript
// Initialize SDK
function initializeUjuSDK() {
    const config = {
        appId: "YOUR_APP_ID",
        appKey: "YOUR_APP_KEY",
        isDebug: true,
        userId: "USER_ID" // Optional, for user-level ad targeting
    };
    
    UjuAdSDK.init(config, function(success, error) {
        if (success) {
            console.log("UJU SDK initialized successfully");
            // SDK initialized successfully, can start loading ads
            loadBannerAd();
        } else {
            console.error("UJU SDK initialization failed:", error);
        }
    });
}

// Load banner ad
function loadBannerAd() {
    const adConfig = {
        placementId: "YOUR_BANNER_PLACEMENT_ID",
        containerId: "banner-ad",
        adSize: {
            width: 320,
            height: 100
        }
    };
    
    UjuAdSDK.loadBannerAd(adConfig, function(success, error) {
        if (success) {
            console.log("Banner ad loaded successfully");
        } else {
            console.error("Banner ad loading failed:", error);
        }
    });
}

Testing ​

Test Mode ​

Enable test mode during development:

javascript
// Enable test mode
UjuAdSDK.setTestMode(true);

Test Devices ​

Add test devices to avoid invalid clicks:

javascript
// Add test device
UjuAdSDK.addTestDevice("YOUR_DEVICE_ID");

Best Practices ​

  • Early initialization: Initialize the SDK as early as possible in the page load process
  • Ad container preparation: Ensure ad containers have fixed size and are visible
  • Error handling: Implement proper error handling for ad loading failures
  • Ad preloading: Preload ads before they need to be displayed
  • Responsive design: Ensure ads adapt to different screen sizes
  • Frequency control: Control ad display frequency to avoid user annoyance

Common Questions ​

Q: Why isn't the SDK initializing? ​

A: Possible reasons:

  • Incorrect App ID or App Key
  • Network connection issues
  • CORS configuration issues
  • Browser compatibility issues

Q: Why aren't ads displaying? ​

A: Possible reasons:

  • Incorrect placement ID
  • Ad container size is 0 or hidden
  • Insufficient ad inventory
  • Ad loading failed due to network issues

Q: What ad formats are supported in H5? ​

A: Supported ad formats:

  • Banner ad
  • Interstitial ad
  • Rewarded video ad
  • Native ad

Q: How to handle ad events? ​

A: Use event listeners to handle ad events:

javascript
// Add ad event listener
UjuAdSDK.on('adLoaded', function(data) {
    console.log('Ad loaded:', data.placementId);
});

UjuAdSDK.on('adError', function(data) {
    console.error('Ad error:', data.placementId, data.error);
});

UjuAdSDK.on('adClicked', function(data) {
    console.log('Ad clicked:', data.placementId);
});

UjuAdSDK.on('adClosed', function(data) {
    console.log('Ad closed:', data.placementId);
});

UjuAdSDK.on('rewarded', function(data) {
    console.log('Rewarded:', data.placementId, data.reward);
});

Next Steps ​

After completing the preparation work, you can proceed with: