Creating Test on pages with React js

[Ridder_M]

Hello,

I'm trying to create a test on a page that is built using React.js and although I can see the changes in the VEC, when running the test, the changes are not shown.  I did saw in one instance that the image flickered, then it displayed the original content.

• Here's the original page: http://test.manzanet.us/account.html
• Here's the page with the changes:  http://test.manzanet.us/account.html?qa=testA

I've attached an image of what the VEC editor shows, which is not consistent to what is shown on the page.  I tried troubleshooting it and didn't see any errors.  Any help will be greatly appreciated.

Thanks,

Ridder H. Manzanet

[dwright]

Ridder,

I see you are using mbox.js.  You should consider using our new library at.js.  It's in First Look status right now and is scheduled for release later this month.  You can download it now via API (search Help for at.js).  We are developing extensions for at.js to tie into different SPA frameworks.  We have several for AngularJS which we developed for the at.js beta participants and are working on React currently.  When complete, they will be posted to the at.js extension github repository.  I would check back there in a few weeks.  These extensions will give you options for deploying mboxes.

Regarding your VEC issues, I don't actually see a test being delivered to your http://test.manzanet.us/account.html?qa=testA URL, so it's likely there is something off in your targeting of the activity.

[Ridder_M]

Thanks for the reply and I'll keep in mind switching to the at.js.  As for the activity in question, I had the test deactivated, but I went ahead the activated it again.  Feel free to look at the activity and provide any feedback.

Thanks,

Ridder H. Manzanet  

[dwright]

Hi Ridder,

I don't see the mbox div getting written to the DOM at all.  Maybe React's virtual dom doesn't allow it?  Try at.js--which doesn't add a div to the DOM for the global mbox to work--and let us know if you get better results.

Daniel

[Ridder_M]

Hi Daniel,

So here's what's interesting: VEC works when changing text on elements that are in the react class, which renders when I load the test page.  What its failing to do is add new elements.  I did looked at migrating to at.js, but it doesn't support SC/Target integration, which is something that we have.  For now, I'm trying to find a solution working with the mbox.js file.

Thanks,

Ridder

[dwright · Accepted solution]

Ok, good luck to you!  I would really encourage you to drop the legacy integration and move to A4T.  Not only are the capabilities much better with the integration, but it would allow you to upgrade to at.js.  Since A4T uses server side calls from Target to Analytics, you don't have to be as concerned about the sequencing of client-side hits to make sure the integration data gets sent to Analytics which can get very tricky in SPAs.

[andrew_r-GrfLbX]

Did anyone ever get ReactJS and at.js to work together?

[Ridder_M]

I was able to make Target work within the React.js environment.  I had to do basically let the browser accept the "unsecured content" in order for the VEC to work.  Implementation-wise, I didn't do anything out of the ordinary, but used the mbox.js file.

[andrew_r-GrfLbX]

Cheers unfortunately I can't even get mbox.js or at.js to load! :(

[MihneaD]

arob87,

What do you mean you can't get mbox.js or at.js to load. Did you mean to say content isn't loading in the VEC?

Mihnea Docea  |  Technical Support Engineer  |  Adobe Digital Marketing 

[andrew_r-GrfLbX]

Whenever I load at.js in to DTM and then load a page I get: "Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened." for the at.js script and of course Target fails to load.

[MihneaD]

arob87,

Per: https://marketing.adobe.com/resources/help/en_US/target/ov2/c_target-atjs-implementation.html

Important: Although at.js communicates with the Target servers asynchronously, the at.js file itself must load synchronously in the <head> section of your page. Ideally, it should be one of the first scripts loaded. Once loaded, at.js executes mbox calls asynchronously through XMLHttpRequest, and does not block page rendering.

Can you check in DTM if you have an option to load the file: synchronously?

Mihnea Docea  |  Technical Support Engineer  |  Adobe Digital Marketing 

[andrew_r-GrfLbX]

Thanks for the reply and the help,

I've checked and DTM is set to load Target synchronously

I get the following console logs when I load the page:

SATELLITE: Test & Target: Initializing
satelliteLib-*****.js:10 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
satelliteLib-*****.js:10 SATELLITE: Test & Target: loaded. 

Although it says loaded it doesn't.

[dwright]

Is there a URL we can look at?  It sounds like something in the chain of operations loading asynchonously which shouldn't be.  Are you loading the main DTM library correctly using the exact code copied from the UI?  Or is someone trying to load DTM asynchronously?

[andrew_r-GrfLbX]

Thanks for the support, link is: https://apply.youandb.co.uk/cyb/account-opening?applyFor=IM136

I do have a funny feeling you're on to something. For reference the function within the react application which loads DTM is:

const attachAms = config => {
    if (!config.trackingId) {
        return;
    }

    const adobedtm = `//assets.adobedtm.com/6677ad16b0484ad2b930d0b209e41c1e96798d52/satelliteLib-${config.trackingId}.js`;

    const head = document.getElementsByTagName('head')[0];
    const scriptEle = document.createElement('script');
    scriptEle.src = adobedtm;
    head.appendChild(scriptEle);

    setTimeout(startAnalytics, 50);
};

[dwright]

Yes, that is not a supported way to load DTM and will not let you add Target correctly.  You need to use the embed code provided by the DTM interface which will load the library synchronously and thus allow you to load Target synchronously.  This is necessary to manage flicker appropriately.