Recherche avancée

Sur d’autres sites (9472)

• record mediasoup RTP stream using FFmpeg for Firefox

  30 juillet 2024, par Hadi Aghandeh

  I am trying to record WebRTC stream using mediasoup. I could record successfully on chrome and safari 13/14/15. However on Firefox the does not work.

  


  Client side code is a vue js component which gets rtp-compabilities using socket.io and create producers after the server creates the transports. This works good on chrome and safari.

  


  const { connect , createLocalTracks } = require('twilio-video');
const SocketClient = require("socket.io-client");
const SocketPromise = require("socket.io-promise").default;
const MediasoupClient = require("mediasoup-client");

export default {
    data() {
        return {
            errors: [],
            isReady: false,
            isRecording: false,
            loading: false,
            sapio: {
                token: null,
                connectionId: 0
            },
            server: {
                host: 'https://rtc.test',
                ws: '/server',
                socket: null,
            },
            peer: {},
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        async init() {
            await this.startCamera();

            if (this.takeId) {
                await this.recordBySapioServer();
            }
        },
        startCamera() {
            return new Promise( (resolve, reject) => {
                if (window.videoMediaStreamObject) {
                    this.setVideoElementStream(window.videoMediaStreamObject);
                    resolve();
                } else {
                    // Get user media as required
                    try {
                        this.localeStream = navigator.mediaDevices.getUserMedia({
                            audio: true,
                            video: true,
                        }).then((stream) => {
                            this.setVideoElementStream(stream);
                            resolve();
                        })
                    } catch (err) {
                        console.error(err);
                        reject();
                    }
                }
            })
        },
        setVideoElementStream(stream) {
            this.localStream = stream;
            this.$refs.video.srcObject = stream;
            this.$refs.video.muted = true;
            this.$refs.video.play().then((video) => {
                this.isStreaming = true;
                this.height = this.$refs.video.videoHeight;
                this.width = this.$refs.video.videoWidth;
            });
        },
        // first thing we need is connecting to websocket
        connectToSocket() {
            const serverUrl = this.server.host;
            console.log("Connect with sapio rtc server:", serverUrl);

            const socket = SocketClient(serverUrl, {
                path:  this.server.ws,
                transports: ["websocket"],
            });
            this.socket = socket;

            socket.on("connect", () => {
                console.log("WebSocket connected");
                // we ask for rtp-capabilities from server to send to us
                socket.emit('send-rtp-capabilities');
            });

            socket.on("error", (err) => {
                this.loading = true;
                console.error("WebSocket error:", err);
            });

            socket.on("router-rtp-capabilities", async (msg) => {
                const { routerRtpCapabilities, sessionId, externalId } = msg;
                console.log('[rtpCapabilities:%o]', routerRtpCapabilities);
                this.routerRtpCapabilities = routerRtpCapabilities;

                try {
                    const device = new MediasoupClient.Device();
                    // Load the mediasoup device with the router rtp capabilities gotten from the server
                    await device.load({ routerRtpCapabilities });

                    this.peer.sessionId = sessionId;
                    this.peer.externalId = externalId;
                    this.peer.device = device;

                    this.createTransport();
                } catch (error) {
                    console.error('failed to init device [error:%o]', error);
                    socket.disconnect();
                }
            });

            socket.on("create-transport", async (msg) => {
                console.log('handleCreateTransportRequest() [data:%o]', msg);

                try {
                    // Create the local mediasoup send transport
                    this.peer.sendTransport = await this.peer.device.createSendTransport(msg);
                    console.log('send transport created [id:%s]', this.peer.sendTransport.id);

                    // Set the transport listeners and get the users media stream
                    this.handleSendTransportListeners();
                    this.setTracks();
                    this.loading = false;
                } catch (error) {
                    console.error('failed to create transport [error:%o]', error);
                    socket.disconnect();
                }
            });

            socket.on("connect-transport", async (msg) => {
                console.log('handleTransportConnectRequest()');
                try {
                    const action = this.connectTransport;

                    if (!action) {
                        throw new Error('transport-connect action was not found');
                    }

                    await action(msg);
                } catch (error) {
                    console.error('ailed [error:%o]', error);
                }
            });

            socket.on("produce", async (msg) => {
                console.log('handleProduceRequest()');
                try {
                    if (!this.produce) {
                        throw new Error('produce action was not found');
                    }
                    await this.produce(msg);
                } catch (error) {
                    console.error('failed [error:%o]', error);
                }
            });

            socket.on("recording", async (msg) => {
                this.isRecording = true;
            });

            socket.on("recording-error", async (msg) => {
                this.isRecording = false;
                console.error(msg);
            });

            socket.on("recording-closed", async (msg) => {
                this.isRecording = false;
                console.warn(msg)
            });

        },
        createTransport() {
            console.log('createTransport()');

            if (!this.peer || !this.peer.device.loaded) {
                throw new Error('Peer or device is not initialized');
            }

            // First we must create the mediasoup transport on the server side
            this.socket.emit('create-transport',{
                sessionId: this.peer.sessionId
            });
        },
        handleSendTransportListeners() {
            this.peer.sendTransport.on('connect', this.handleTransportConnectEvent);
            this.peer.sendTransport.on('produce', this.handleTransportProduceEvent);
            this.peer.sendTransport.on('connectionstatechange', connectionState => {
                console.log('send transport connection state change [state:%s]', connectionState);
            });
        },
        handleTransportConnectEvent({ dtlsParameters }, callback, errback) {
            console.log('handleTransportConnectEvent()');
            try {
                this.connectTransport = (msg) => {
                    console.log('connect-transport action');
                    callback();
                    this.connectTransport = null;
                };

                this.socket.emit('connect-transport',{
                    sessionId: this.peer.sessionId,
                    transportId: this.peer.sendTransport.id,
                    dtlsParameters
                });

            } catch (error) {
                console.error('handleTransportConnectEvent() failed [error:%o]', error);
                errback(error);
            }
        },
        handleTransportProduceEvent({ kind, rtpParameters }, callback, errback)  {
            console.log('handleTransportProduceEvent()');
            try {
                this.produce = jsonMessage => {
                    console.log('handleTransportProduceEvent callback [data:%o]', jsonMessage);
                    callback({ id: jsonMessage.id });
                    this.produce = null;
                };

                this.socket.emit('produce', {
                    sessionId: this.peer.sessionId,
                    transportId: this.peer.sendTransport.id,
                    kind,
                    rtpParameters
                });
            } catch (error) {
                console.error('handleTransportProduceEvent() failed [error:%o]', error);
                errback(error);
            }
        },
        async recordBySapioServer() {
            this.loading = true;
            this.connectToSocket();
        },
        async setTracks() {
            // Start mediasoup-client's WebRTC producers
            const audioTrack = this.localStream.getAudioTracks()[0];
            this.peer.audioProducer = await this.peer.sendTransport.produce({
                track: audioTrack,
                codecOptions :
                    {
                        opusStereo : 1,
                        opusDtx    : 1
                    }
            });


            let encodings;
            let codec;
            const codecOptions = {videoGoogleStartBitrate : 1000};

            codec = this.peer.device.rtpCapabilities.codecs.find((c) => c.kind.toLowerCase() === 'video');
            if (codec.mimeType.toLowerCase() === 'video/vp9') {
                encodings = { scalabilityMode: 'S3T3_KEY' };
            } else {
                encodings = [
                    { scaleResolutionDownBy: 4, maxBitrate: 500000 },
                    { scaleResolutionDownBy: 2, maxBitrate: 1000000 },
                    { scaleResolutionDownBy: 1, maxBitrate: 5000000 }
                ];
            }
            const videoTrack = this.localStream.getVideoTracks()[0];
            this.peer.videoProducer =await this.peer.sendTransport.produce({
                track: videoTrack,
                encodings,
                codecOptions,
                codec
            });

        },
        startRecording() {
            this.Q.answer.recordingId = this.peer.externalId;
            this.socket.emit("start-record", {
                sessionId: this.peer.sessionId
            });
        },
        stopRecording() {
            this.socket.emit("stop-record" , {
                sessionId: this.peer.sessionId
            });
        },
    },

}





  


  console.log of my ffmpeg process :

  


  // sdp string
[sdpString:v=0
  o=- 0 0 IN IP4 127.0.0.1
  s=FFmpeg
  c=IN IP4 127.0.0.1
  t=0 0
  m=video 25549 RTP/AVP 101 
  a=rtpmap:101 VP8/90000
  a=sendonly
  m=audio 26934 RTP/AVP 100 
  a=rtpmap:100 opus/48000/2
  a=sendonly
  ]

// ffmpeg args
commandArgs:[
  '-loglevel',
  'debug',
  '-protocol_whitelist',
  'pipe,udp,rtp',
  '-fflags',
  '+genpts',
  '-f',
  'sdp',
  '-i',
  'pipe:0',
  '-map',
  '0:v:0',
  '-c:v',
  'copy',
  '-map',
  '0:a:0',
  '-strict',
  '-2',
  '-c:a',
  'copy',
  '-f',
  'webm',
  '-flags',
  '+global_header',
  '-y',
  'storage/recordings/26e63cb3-4f81-499e-941a-c0bb7f7f52ce.webm',
  [length]: 26
]
// ffmpeg log
ffmpeg::process::data [data:'ffmpeg version n4.4']
ffmpeg::process::data [data:' Copyright (c) 2000-2021 the FFmpeg developers']
ffmpeg::process::data [data:'\n']
ffmpeg::process::data [data:'  built with gcc 11.1.0 (GCC)\n']
ffmpeg::process::data [data:'  configuration: --prefix=/usr --disable-debug --disable-static --disable-stripping --enable-amf --enable-avisynth --enable-cuda-llvm --enable-lto --enable-fontconfig --enable-gmp --enable-gnutls --enable-gpl --enable-ladspa --enable-libaom --enable-libass --enable-libbluray --enable-libdav1d --enable-libdrm --enable-libfreetype --enable-libfribidi --enable-libgsm --enable-libiec61883 --enable-libjack --enable-libmfx --enable-libmodplug --enable-libmp3lame --enable-libopencore_amrnb --enable-libopencore_amrwb --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-librav1e --enable-librsvg --enable-libsoxr --enable-libspeex --enable-libsrt --enable-libssh --enable-libsvtav1 --enable-libtheora --enable-libv4l2 --enable-libvidstab --enable-libvmaf --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxcb --enable-libxml2 --enable-libxvid --enable-libzimg --enable-nvdec --enable-nvenc --enable-shared --enable-version3\n']
ffmpeg::process::data [data:'  libavutil      56. 70.100 / 56. 70.100\n' +
  '  libavcodec     58.134.100 / 58.134.100\n' +
  '  libavformat    58. 76.100 / 58. 76.100\n' +
  '  libavdevice    58. 13.100 / 58. 13.100\n' +
  '  libavfilter     7.110.100 /  7.110.100\n' +
  '  libswscale      5.  9.100 /  5.  9.100\n' +
  '  libswresample   3.  9.100 /  3.  9.100\n' +
  '  libpostproc    55.  9.100 / 55.  9.100\n' +
  'Splitting the commandline.\n' +
  "Reading option '-loglevel' ... matched as option 'loglevel' (set logging level) with argument 'debug'.\n" +
  "Reading option '-protocol_whitelist' ..."]
ffmpeg::process::data [data:" matched as AVOption 'protocol_whitelist' with argument 'pipe,udp,rtp'.\n" +
  "Reading option '-fflags' ..."]
ffmpeg::process::data [data:" matched as AVOption 'fflags' with argument '+genpts'.\n" +
  "Reading option '-f' ... matched as option 'f' (force format) with argument 'sdp'.\n" +
  "Reading option '-i' ... matched as input url with argument 'pipe:0'.\n" +
  "Reading option '-map' ... matched as option 'map' (set input stream mapping) with argument '0:v:0'.\n" +
  "Reading option '-c:v' ... matched as option 'c' (codec name) with argument 'copy'.\n" +
  "Reading option '-map' ... matched as option 'map' (set input stream mapping) with argument '0:a:0'.\n" +
  "Reading option '-strict' ...Routing option strict to both codec and muxer layer\n" +
  " matched as AVOption 'strict' with argument '-2'.\n" +
  "Reading option '-c:a' ... matched as option 'c' (codec name) with argument 'copy'.\n" +
  "Reading option '-f' ... matched as option 'f' (force format) with argument 'webm'.\n" +
  "Reading option '-flags' ... matched as AVOption 'flags' with argument '+global_header'.\n" +
  "Reading option '-y' ... matched as option 'y' (overwrite output files) with argument '1'.\n" +
  "Reading option 'storage/recordings/26e63cb3-4f81-499e-941a-c0bb7f7f52ce.webm' ... matched as output url.\n" +
  'Finished splitting the commandline.\n' +
  'Parsing a group of options: global .\n' +
  'Applying option loglevel (set logging level) with argument debug.\n' +
  'Applying option y (overwrite output files) with argument 1.\n' +
  'Successfully parsed a group of options.\n' +
  'Parsing a group of options: input url pipe:0.\n' +
  'Applying option f (force format) with argument sdp.\n' +
  'Successfully parsed a group of options.\n' +
  'Opening an input file: pipe:0.\n' +
  "[sdp @ 0x55604dc58400] Opening 'pipe:0' for reading\n" +
  '[sdp @ 0x55604dc58400] video codec set to: vp8\n' +
  '[sdp @ 0x55604dc58400] audio codec set to: opus\n' +
  '[sdp @ 0x55604dc58400] audio samplerate set to: 48000\n' +
  '[sdp @ 0x55604dc58400] audio channels set to: 2\n' +
  '[udp @ 0x55604dc6c500] end receive buffer size reported is 425984\n' +
  '[udp @ 0x55604dc6c7c0] end receive buffer size reported is 425984\n' +
  '[sdp @ 0x55604dc58400] setting jitter buffer size to 500\n' +
  '[udp @ 0x55604dc6d900] end receive buffer size reported is 425984\n' +
  '[udp @ 0x55604dc6d2c0] end receive buffer size reported is 425984\n' +
  '[sdp @ 0x55604dc58400] setting jitter buffer size to 500\n']
ffmpeg::process::data [data:'[sdp @ 0x55604dc58400] Before avformat_find_stream_info() pos: 210 bytes read:210 seeks:0 nb_streams:2\n']
  **mediasoup:Consumer resume() +1s**
  **mediasoup:Channel request() [method:consumer.resume, id:12] +1s**
  **mediasoup:Channel request succeeded [method:consumer.resume, id:12] +0ms**
  **mediasoup:Consumer resume() +1ms**
  **mediasoup:Channel request() [method:consumer.resume, id:13] +0ms**
  **mediasoup:Channel request succeeded [method:consumer.resume, id:13] +0ms**
ffmpeg::process::data [data:'[sdp @ 0x55604dc58400] Could not find codec parameters for stream 0 (Video: vp8, 1 reference frame, yuv420p): unspecified size\n' +
  "Consider increasing the value for the 'analyzeduration' (0) and 'probesize' (5000000) options\n"]
ffmpeg::process::data [data:'[sdp @ 0x55604dc58400] After avformat_find_stream_info() pos: 210 bytes read:210 seeks:0 frames:0\n' +
  "Input #0, sdp, from 'pipe:0':\n" +
  '  Metadata:\n' +
  '    title           : FFmpeg\n' +
  '  Duration: N/A, bitrate: N/A\n' +
  '  Stream #0:0, 0, 1/90000: Video: vp8, 1 reference frame, yuv420p, 90k tbr, 90k tbn, 90k tbc\n' +
  '  Stream #0:1, 0, 1/48000: Audio: opus, 48000 Hz, stereo, fltp\n' +
  'Successfully opened the file.\n' +
  'Parsing a group of options: output url storage/recordings/26e63cb3-4f81-499e-941a-c0bb7f7f52ce.webm.\n' +
  'Applying option map (set input stream mapping) with argument 0:v:0.\n' +
  'Applying option c:v (codec name) with argument copy.\n' +
  'Applying option map (set input stream mapping) with argument 0:a:0.\n' +
  'Applying option c:a (codec name) with argument copy.\n' +
  'Applying option f (force format) with argument webm.\n' +
  'Successfully parsed a group of options.\n' +
  'Opening an output file: storage/recordings/26e63cb3-4f81-499e-941a-c0bb7f7f52ce.webm.\n' +
  "[file @ 0x55604dce5bc0] Setting default whitelist 'file,crypto,data'\n"]
ffmpeg::process::data [data:'Successfully opened the file.\n' +
  '[webm @ 0x55604dce0fc0] dimensions not set\n' +
  'Could not write header for output file #0 (incorrect codec parameters ?): Invalid argument\n' +
  'Error initializing output stream 0:1 -- \n' +
  'Stream mapping:\n' +
  '  Stream #0:0 -> #0:0 (copy)\n' +
  '  Stream #0:1 -> #0:1 (copy)\n' +
  '    Last message repeated 1 times\n' +
  '[AVIOContext @ 0x55604dc6dcc0] Statistics: 0 seeks, 0 writeouts\n' +
  '[AVIOContext @ 0x55604dc69380] Statistics: 210 bytes read, 0 seeks\n']
ffmpeg::process::close



  


  FFmpeg says dimensions not  set and Could not write header for output file when I use Firefox. This might be enough for understanding the problem, but if you need more information you can read how server side is performing.
Server-Side in summary can be something like this :
lets say we initialized worker and router at run time using following functions.

  


      // Start the mediasoup workers
module.exports.initializeWorkers = async () => {
  const { logLevel, logTags, rtcMinPort, rtcMaxPort } = config.worker;

  console.log('initializeWorkers() creating %d mediasoup workers', config.numWorkers);

  for (let i = 0; i < config.numWorkers; ++i) {
    const worker = await mediasoup.createWorker({
      logLevel, logTags, rtcMinPort, rtcMaxPort
    });

    worker.once('died', () => {
      console.error('worker::died worker has died exiting in 2 seconds... [pid:%d]', worker.pid);
      setTimeout(() => process.exit(1), 2000);
    });

    workers.push(worker);
  }
};


  


  module.exports.createRouter = async () => {
  const worker = getNextWorker();

  console.log('createRouter() creating new router [worker.pid:%d]', worker.pid);

  console.log(`config.router.mediaCodecs:${JSON.stringify(config.router.mediaCodecs)}`)

  return await worker.createRouter({ mediaCodecs: config.router.mediaCodecs });
};


  


  We pass router.rtpCompatibilities to the client. clients get the rtpCompatibilities and create a device and loads it. after that a transport must be created at server side.

  


      const handleCreateTransportRequest = async (jsonMessage) => {

  const transport = await createTransport('webRtc', router);

  var peer;
  try {peer = peers.get(jsonMessage.sessionId);}
  catch{console.log('peer not found')}
  
  peer.addTransport(transport);

  peer.socket.emit('create-transport',{
    id: transport.id,
    iceParameters: transport.iceParameters,
    iceCandidates: transport.iceCandidates,
    dtlsParameters: transport.dtlsParameters
  });
};


  


  Then after the client side also created the transport we listen to connect event an at the time of event, we request the server to create connection.

  


  const handleTransportConnectRequest = async (jsonMessage) => {
  var peer;
  try {peer = peers.get(jsonMessage.sessionId);}
  catch{console.log('peer not found')}

  if (!peer) {
    throw new Error(`Peer with id ${jsonMessage.sessionId} was not found`);
  }

  const transport = peer.getTransport(jsonMessage.transportId);

  if (!transport) {
    throw new Error(`Transport with id ${jsonMessage.transportId} was not found`);
  }

  await transport.connect({ dtlsParameters: jsonMessage.dtlsParameters });
  console.log('handleTransportConnectRequest() transport connected');
  peer.socket.emit('connect-transport');
};


  


  Similar thing happen on produce event.

  


  const handleProduceRequest = async (jsonMessage) => {
  console.log('handleProduceRequest [data:%o]', jsonMessage);

  var peer;
  try {peer = peers.get(jsonMessage.sessionId);}
  catch{console.log('peer not found')}

  if (!peer) {
    throw new Error(`Peer with id ${jsonMessage.sessionId} was not found`);
  }

  const transport = peer.getTransport(jsonMessage.transportId);

  if (!transport) {
    throw new Error(`Transport with id ${jsonMessage.transportId} was not found`);
  }

  const producer = await transport.produce({
    kind: jsonMessage.kind,
    rtpParameters: jsonMessage.rtpParameters
  });

  peer.addProducer(producer);

  console.log('handleProducerRequest() new producer added [id:%s, kind:%s]', producer.id, producer.kind);

  peer.socket.emit('produce',{
    id: producer.id,
    kind: producer.kind
  });
};


  


  For Recording, first I create plain transports for audio and video producers.

  


  const rtpTransport = router.createPlainTransport(config.plainRtpTransport);


  


  then rtp transport must be connected to ports :

  


    await rtpTransport.connect({
    ip: '127.0.0.1',
    port: remoteRtpPort,
    rtcpPort: remoteRtcpPort
  });


  


  Then the consumer must also be created.

  


    const rtpConsumer = await rtpTransport.consume({
    producerId: producer.id,
    rtpCapabilities,
    paused: true
  });


  


  After that we can start recording using following code :

  


   this._rtpParameters = args;
    this._process = undefined;
    this._observer = new EventEmitter();
    this._peer = args.peer;

    this._sdpString = createSdpText(this._rtpParameters);
    this._sdpStream = convertStringToStream(this._sdpString);
    // create dir
    const dir = process.env.REOCRDING_PATH ?? 'storage/recordings';
    if (!fs.existsSync(dir)) shelljs.mkdir('-p', dir);
  
    this._extension = 'webm';
    // create file path
    this._path = `${dir}/${args.peer.sessionId}.${this._extension}`
    let loop = 0;
    while(fs.existsSync(this._path)) {
      this._path = `${dir}/${args.peer.sessionId}-${++loop}.${this._extension}`
    }

this._recordingnModel = await Recording.findOne({sessionIds: { $in: [this._peer.sessionId] }})
    this._recordingnModel.files.push(this._path);
    this._recordingnModel.save();

let proc  = ffmpeg(this._sdpStream)
    .inputOptions([
      '-protocol_whitelist','pipe,udp,rtp',
      '-f','sdp',
    ])
    .format(this._extension)
    .output(this._path)
    .size('720x?')
    .on('start', ()=>{
      this._peer.socket.emit('recording');
    })
    .on('end', ()=>{
      let path = this._path.replace('storage/recordings/', '');
      this._peer.socket.emit('recording-closed', {
        url: `${process.env.APP_URL}/recording/file/${path}`
      });
    });

    proc.run();
    this._process =  proc;
  }



  


• 10 Proven Ways Heatmap Software Improves Website Conversions

  20 septembre 2021, par Ben Erskine — Analytics Tips, Plugins, Heatmap
  

  Heatmap software is critical in improving website conversions. Why ? Because it provides customer-centric insights. 

  In the online market, businesses that are customer-centric are 60% more profitable than businesses that are not.

  Using heatmaps to track factors such as usability, compare A/B landing pages and content engagement across channels optimises online conversions by addressing issues faced by real users. 

  How heatmaps benefit your customers

  Customer experience is one of the most important factors in business success. 

  Website heatmap software like Matomo offers unique insights into customer behaviour that is then used to improve their experience, usability and engagement. 

  Data analysis captures information on how many people complete a sales funnel or bounce from a website. Behavioural analytics like heatmaps can show you why they bounce.

  This benefits your customers (and therefore your bottom line) because it puts the focus on them and their needs.

  10 ways heatmap software helps increase website conversions

  #1. Improve UX/Usability 

  Heatmap analytics improve usability by identifying where you are losing customers on your website.

  Forrester research indicates that improving user experience can improve conversions by up to 400%, and on average every $1 spent on UX has a return of $100. 

  For example, you may have a CTA button but customers never click it to reach the payment page. 

  Heatmaps show you how customers interact with your website naturally so that you can adjust it according to their needs.

  Using heatmap analytics to improve usability boosts conversions because it improves customer experiences. 88% of online consumers say that they wouldn’t even bother returning to a website after a bad experience. 

  #2. Website design and content structure 

  Another way that heatmaps can improve conversions is to analyse your website design and content structure. 

  You might be wondering how often a specific ad or a banner was displayed and viewed by your visitors on any of your pages and how often a visitor actually interacted with them. These two parts of the analysis are called content impression and content interaction.

  Ideally, your website elements such as banners, listings, buttons and thumbnails will entice customers to click and find out more. 

  Heatmaps and click maps analyse

  1. How many impressions the content has (e.g. a banner), and
  2. What percent of users that see the content click on it 

  For example, you may have a banner with high impressions but low click-through rates. Tracking content interactions optimises your website by showing which elements or CTAs need more visibility. 

  #3. A/B testing

  Heatmaps provide invaluable data on which landing pages are converting the best. Not only that, but session recordings and heatmap data can show you exactly why one is converting better so that you can replicate the results to increase conversions on other landing pages.

  Tracking heatmap updates on different versions of the same sales page will help confirm creative solutions faster than feedback alone. 

  Ultimately this kind of comparison increases your ROI faster because you are not guessing why some customers are converting and others are not. 

  #4. Conversion Funnel

  Using heatmap software in sales funnels lets you visualise user behaviour at each stage of the conversion process. 

  For example, if many customers are dropping off a payment page, heatmaps can indicate whether it is a usability issue such as pop ups, lack of clarity with payment buttons or something web developers haven’t seen from the back end. 

  These analytics improve conversions by reducing friction in sales funnels as much as possible. 

  #5. Content engagement across channels 

  Optimising websites across all channels is now expected for online businesses. 

  Bad mobile optimisation annoys 48% of online shoppers, and if your web page takes longer than 3 seconds to load, 53% of visitors will simply click away. 

  You can use heatmaps to improve engagement by tracking mouse activity, clicks and scrolling. This helps improve conversions by confirming 

  • How invested a user is in the page 
  • How easy it is to navigate your website and content on different devices 
  • What is your most viewed content and what to push more of 
  • How users generally move through your website on different devices 
  • How clear your messaging is (e.g. high click through rate but low engagement could indicate they aren’t finding what they’re looking for once they click on a CTA)

  #6. Above the fold analysis 

  Although a well-used web development term, above the fold is still one of the most important factors in heatmap analysis. 

  Above the fold analysis gives you insight into a customer’s first impression of a page. 

  An example of above-the-fold heatmaps in action could be a page with a video explanation. Say you have a landing page with a video below the fold that explains why someone should buy and has a CTA button underneath. If there are a lot of page visitors but very few people scrolling below the fold, you can see why hardly any visitors are watching the video or engaging with the CTA button. 

  Insights like this would inform further development such as including important video content above the fold or updating header copy to encourage visitors to scroll down the page more often.

  

  #7. Session recording

  Recording features go hand in hand with heatmap visualisations. Recording features like Session Recording shows the flow of each user’s time on your website. 

  For example, a session recording replays all clicks, mouse movements, scrolls, window resizes, form interactions, and page changes (e.g. when a popup appears).

  #8. Scroll heatmap 

  A scroll heatmap shows the percentage of people that have seen a part of the page. 

  For example, the top of a website page will be the “hottest” in a scroll heatmap, and it naturally gets “colder” further down.

  Tracking this shows whether customers are staying on the page, whether they are only seeing information above the fold, and whether sales pages are engaging. 

  It is an effective strategy for improving sales pages because it shows where customers are losing interest and which elements receive the most engagement.

  

  #9. Records clicks 

  With a click heatmap, you can find out what your visitors think is clickable on a webpage.

  This improves conversions in two ways. 

  Firstly, it shows whether customers are clicking where you expect them to. For example, if you create a “buy now” or “free trial” button but nobody ever pushes it, it informs your back end developers that it needs an upgrade. 

  Secondly, it indicates any user experience issues. If there are a lot of clicks on an element that doesn’t link anywhere, it shows that it either needs to be changed or have a link included because customers are trying to engage with it. 

  For even more accurate data, combine click maps with hover maps. This shows where users are paying attention but not clicking through. 

  #10. Records mouse movement/hovering

  Is your website distracting users from the ultimate goal of converting ? Does your website have a logical flow and next step ? Recording mouse movement and attention will help you answer questions like these. 

  Mouse move and hover heatmaps identify where your website visitors engage on the page. Are they naturally drawn to your CTAs ? Is the sidebar taking their attention away from the primary content ? 

  This data increases the likelihood of conversions because it shows where you need to remove distractions or draw their attention in. 

  

  Final thoughts on heatmap analytics 

  Heatmap analytics benefit both you and your customers. By identifying issues that stop them from buying and optimise their engagement, you’ll have happy customers and happy stakeholders. 

  Next, check out these guides on heatmap software and using user behaviour analytics to increase conversions and improve customer experience !

  The Ultimate Guide to Heatmap Software

  How to use Behavioural Analytics to Improve Website Performance

  Heatmap Video

  Session Recording Video

• The Ultimate Guide to HeatMap Software

  20 septembre 2021, par Ben Erskine — Analytics Tips, Plugins, Heatmaps

  One of the most effective ways to improve the user experience on your website is to use heatmap software. As well as in-depth insight on how to improve your website and funnels, user behaviour analytics complement traditional web metrics with insights from your customers’ point of view. 

  Heatmap software shows actual user behaviour. That means that you have a visual representation of why a customer might not be converting instead of guessing. 

  By tracking clicks, mouse movement, and page scrolling as well as analysing above the fold content engagement and overall session recordings, heatmap software helps improve user experience and therefore customer retention and conversions.  

  

  What is heatmap software ?

  Heatmap software is a data visualisation tool that uses colour to show what actions a user is taking on a website. 

  If there is a design element on a page that many users engage with, it will show as red/hot. For elements that are less engaging, it will show on the analysis as blue/cold. 

   

  Heatmap software like Matomo helps businesses to improve user experience and increase conversions by tracking elements such as :

  • Flow through sales funnels 
  • Individual session recordings for user experience 
  • A/B page comparisons 
  • Form analytics for sign ups and conversions 
  • Media interaction such as instruction or sales videos
  • Clicks on important links and information 

  Using data visualisation software like a heatmap provides more in-depth data when combined with standard website metrics. 

  What is heatmap software used for ?

  Heatmap software tracks website user behaviour to improve website performance and increase conversions. 

  Heatmaps can show you a detailed analysis of : 

  • Where visitors are clicking (or not clicking) 
  • Where visitors are hovering with their mouse
  • How far users are scrolling or stopping 
  • Where the focus is above the fold 
  • What roadblocks or frictions customers are facing in the sales funnel

  Analysing activity on your website and across channels from your customers point of view is critical in developing a customer-centric business model. 

  This is because heatmaps not only show you what customers are doing but why they are doing it. 

  Heatmap software is ideal for businesses updating and redesigning websites. It also helps to answer important growth questions such as “how can we improve our user experience ?” and “why is our sales funnel not converting better ?”. 

  The benefits of using data visualisation like heatmaps for your website

  Heatmaps are critical for improving websites because they drastically improve customer experience. 

  Customer experience is one of the most important factors in modern business success. A Walker study found that customer experience is one of the biggest differentiators between brands, overtaking other factors such as price. 

  Where straightforward website metrics show customers left a page without action, data visualisation and session recordings show what happens in between them arriving and leaving. This gives web developers and marketers invaluable insights to improve website design and ultimately increase conversions. 

  How heatmap software improves your website and conversions

  There are a few key ways that heatmap software boosts website performance and conversions. All of them focus on both creating a seamless buyer journey and using data to improve results over time. 

  How heatmap software improves conversions ; 

  • By improving UX and usability– 70% of online businesses fail due to bad usability. Heatmaps identify user frustrations and optimise accordingly 
  • By improving content structure – Heatmaps take the guesswork out of design layout and content structure by showing real visitor experiences on your website 
  • By comparing A/B landing pages – Using heatmaps on alternate landing pages can show you why conversions are working or not working based on user activity on the page
  • By optimising across devices – See how your visitors are interacting with your content to learn how well optimised your website is for various devices and remove roadblocks 

  Heatmap analytics you need to improve website user experience

  Click heatmap

  Click heatmaps are useful for two key reasons.

  Firstly, it shows where website users are clicking. 

  Heatmaps that show clicks give you a visual representation of whether copy and CTA links are clear from the customers’ point of view. It can also show whether a customer is clicking on a design feature that doesn’t link anywhere. 

  Secondly, it shows where website users are not clicking. This is just as important when developing funnels and improving user experiences.

  For example, you may have a CTA button for a free trial or purchase. A click heatmap analysis would show if this isn’t clicked on mobile devices and informs developers that it needs to be more mobile-friendly.

  

  Mouse move or hover heatmap

  Like a click heatmap, a mouse hover heatmap shows how you can improve the overall user experience.

  For example, hover heatmaps identify where your visitors engage on a particular webpage. Ideally, of course, you want them to engage with CTAs. Analysing their mouse movements or where they are hovering for more information gives you an indication of any page elements that are distracting them or not working.

  

  Scroll heatmap

  A scroll heatmap uses colours to visualise how far down in a page your visitors scroll. For most web pages, the top will have the most impressions and will naturally get less views (i.e. get “colder” on the heatmap) further down the page. 

  This lets you find out if there is important content positioned too far down the page or if the page is designed to encourage users to keep scrolling.

  No matter how good your product or service is, it won’t convert if potential customers aren’t engaged and scrolling far enough to see it.

  

  Above the fold analysis 

  Above the fold is the content that a visitor sees without scrolling. 

  In a heatmap, the “Average Above the Fold” line will show you how much content your visitors see on average when they open your page. It also shows whether the page design is engaging, whether it encourages visitors to keep scrolling, and whether important information is too far down the page and therefore being missed. 

  Above the fold analysis is arguably the most important as this is the section that the highest number of traffic will see. Using this information ensures that the right content for conversion is seen by the highest number of visitors. 

  

  Session recording

  Session Recording lets you record a real visitor session, so you can see clicks, mouse movements, scrolls, window resizes, page changes, and form interactions all in one. 

  They allow you to understand the experience from the point of view of your visitor and then optimise your website to maximise your success.

  Heatmap software like Matomo takes this one step further and allows you to gather session recordings for individual segments. By analysing sessions based on segments, you can further personalise and optimise based on customer history and patterns.

  

  Final thoughts on heatmap software 

  Heatmap software improves your user experience by easily spotting critical issues that you can then address. 

  As well as that, heatmap analytics like clicks, mouse movement, scroll, above the fold analysis and session recordings increase your marketing ROI by making the most of your existing traffic. 

  It’s a win-win ! 

  Now that you know what heatmap software is, the benefits of using heatmaps on your website and how it can improve your user experience, check out more handy resources.

  10 Proven Ways Heatmaps Improve Website Conversions

  How to use Behavioural Analytics to Improve Website Performance

  Heatmap Overview Video

  Session Recording Overview Video