Wechat small program advertising access, the relevant documents have been very clear, the following main summary of some of the problems I encountered.

The related documents

  • Advertising – Guide
  • Advertising – API
  • Traffic main operation guide

Repeat registration for advertising related events

  • The problem code
useEffect(() = > {
    // Pull an AD
    if (wx.createInterstitialAd) {
      interstitialAd.current = wx.createInterstitialAd({
        adUnitId: 'adunit-xxxx'
      })
      
      // AD load debugging opens the following commented code
      const handleOnLoad = () = > {
        console.log('Succeeded in pulling the advert ~ ~')
      }
      interstitialAd.current.onLoad(handleOnLoad)

      const handleOnError = (err) = > {
        console.warn('wx.createInterstitialAd error: ', err)
      }
      interstitialAd.current.onError(handleOnError)

      const handleOnClose = () = > {
        // After closing the advert, play the claim animation
        handleShowDrawDownTips()
      }
      interstitialAd.current.onClose(handleOnClose)
    }
}, [handleShowDrawDownTips])
Copy the code

The side effect in the code above is that it relies on the external method handleShowDrawDownTips, which is triggered when this method changes, causing the AD to be double-registered and the related event to be double-registered. Improvement: The advertising registration logic is separated from the event registration, and the event registration should be destroyed before the event registration (this operation is mentioned in the document – Advertising Guide of wechat, but the specific method is not specified, and the relevant method is found in the corresponding API document after Google)

  • After the problem is solved
useEffect(() = > {
    // Pull an AD
    if (wx.createInterstitialAd) {
      interstitialAd.current = wx.createInterstitialAd({
        adUnitId: 'adunit-xxxx'
      })
    }
}, [])

useEffect(() = > {
    // Add a listening event to the spot AD
    if (interstitialAd.current) {
      // AD load debugging opens the following commented code
      const handleOnLoad = () = > {
        console.log('Succeeded in pulling the advert ~ ~')}// Cancel the listening event here
      interstitialAd.current.offLoad(handleOnLoad)
      interstitialAd.current.onLoad(handleOnLoad)

      const handleOnError = (err) = > {
        console.warn('wx.createInterstitialAd error: ', err)
      }
      // Cancel the listening event here
      interstitialAd.current.offError(handleOnError)
      interstitialAd.current.onError(handleOnError)

      const handleOnClose = () = > {
        // After closing the advert, play the claim animation
        handleShowDrawDownTips()
      }
      // Cancel the listening event here
      interstitialAd.current.offClose(handleOnClose)
      interstitialAd.current.onClose(handleOnClose)
    }
}, [handleShowDrawDownTips])

Copy the code

Other points to note

  • Multiple controllable ads (incentivized video ads, interstitial ads) need a certain amount of time between displays, if the interval is too short, the next AD will not play
  • The AD may not be pulled, so you need to deal with the interaction and presentation logic that does not receive the AD