Elastic APM page load transaction showing as Unknown

Question

Elastic elastic.co APM page load transaction name visibility using RUM(js) setup not working. transaction name showing as Unknown in the page load request transaction type.

In Elastic APM monitoring tool elastic.co, page load transactions are not showing up. I tried the following configuration,

elasticApm.init({
    serviceName: "${settings.ELASTIC_APM['SERVICE_NAME']}",
    serverUrl: "${settings.ELASTIC_APM['SERVER_URL']}",
    pageLoadTraceId: "${ apm['trace_id'] }",
    pageLoadSpanId: "${ apm['span_id'] }",
    pageLoadSampled: ${ apm['is_sampled_js'] },
});

// Manually set the name for the initial page load transaction
elasticApm.setInitialPageLoadName('YourPageLoadTransactionName');

// Other code for your web application

// Manually set the name for a subsequent transaction
elasticApm.setTransactionName('YourCustomTransactionName');

// More code for your web application

but its not working. tried this way too,

elasticApm.init({
    serviceName: "${settings.ELASTIC_APM['SERVICE_NAME']}",
    serverUrl: "${settings.ELASTIC_APM['SERVER_URL']}",
    pageLoadTraceId: "${ apm['trace_id'] }",
    pageLoadSpanId: "${ apm['span_id'] }",
    pageLoadSampled: ${ apm['is_sampled_js'] },
    pageLoadTransactionName: "CustomName"
});

not working.