Adobe Launch, Tracking page view With React without r...

[buildmeup]

Hello, i want to tracking pageview on page but because the web made from react the page not refreshed but the url changed, similiar like modal but its not.

example: origin url www..../page1 when i klik the button the url changed into www.../page2 but the var wont change if i not open it by new tabs. how to get the var within exsiting flow and get the data from www.../page2. with Adobe Launch

Any suggestion/reference, that will be big help.

Thanks in advance

[Brian_Johnson_ · Accepted solution]

@buildmeup - The simplest approach would be to create a data element that picks up the pathname, then build a rule that executes when that data element changes. For example, assuming you've created a data element named "url_pathname", the rule would execute based on the following event:

One thing to note is you'll need to make sure the s.pageURL property gets updated at same time, or Adobe will associate every page view with the URL that was present when the analytics library first loaded. 

[buildmeup]

thanks for your answer, i already fix this issue by add clear vars on every rules that i made. thank you bro

[yuhuisg]

Try the "History Change" event.

Reference: https://experienceleague.adobe.com/docs/launch/using/extensions-ref/adobe-extension/core-extension/o...

History Change

Trigger the event if a pushState or hashchange occurs.

[JyotiSharmaV]

Hi @yuhuisg, I have the same thing implemented at my end. I have webpages which are Single Page Application without refresh. The URL change happens on navigation but not the whole page is refreshed that's why no adobe hit happens until pages are hard refreshed. To solve this I created History Change event in launch and set Send Beacon to s.t() however, Adobe is associating every page view with the page URL that was present when the analytics library first loaded.

[Brian_Johnson_]

@JyotiSharmaV - You have to update s.pageURL to the new URL value (document.location.href) for each s.t() call.

[JyotiSharmaV]

@Brian_Johnson_ can you help on where in rule and how ?

[Brian_Johnson_]

@JyotiSharmaV - If you're using the Adobe Analytics extension, there's an option to set the "Page URL" under Advanced Options in the Set Variables action type. If you always set that to the value of document.location.href, you should be in good shape.

[reportb46259316]

I have question regarding this, with History Change each time, my tag is fired but the datalayer is not getting updated. In the debugger I am collecting last page information. What should I do exactly for that so my datal ayer start getting update. Do I need something on my website code or something else in Adobe Launch to add it?

[JyotiSharmaV]

@Brian_Johnson_ its resolved. Thank you

[jantzen_b]

Do any of the answers below answer your initial question? If so, can you select one of them as the correct answer? If none of the answers already provided answer your question, can you provide additional information to better help the community solve your question?

[reportb46259316]

I have question regarding this, with History Change each time, my tag is fired but the datalayer is not getting updated. In the debugger I am collecting last page information. What should I do exactly for that so my datal ayer start getting update. Do I need something on my website code or something else in Adobe Launch to add it?

[yuhuisg]

This is a common problem with the History Change. It happens too with Google Tag Manager. I don't know the exact reason, but I think this problem of the dataLayer not being updated is because of the way that the browser works, i.e. user clicks a link --> browser navigates away --> browser triggers "history change" event --> code to update dataLayer executes. Since the "history change" got triggered before the dataLayer was updated, so you won't get your expected dataLayer values during the "history change" event.

The best solution is to not use History Change. Instead, you have to control all of the event triggering by yourself. That means, for every user click, push an "event" into your dataLayer explicitly together with other values. Then listen for that event in a Launch rule. When the rule gets triggered, all of your dataLayer values should be available for you to use.