Creating Test on pages with React js | Community
Skip to main content
Ridder_M
Ridder_M
Level 2
March 31, 2016
Solved

Creating Test on pages with React js

  • March 31, 2016
  • 15 replies
  • 16882 views

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.

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by dwright-adobe

    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.

    15 replies

    Show previous replies
    MihneaD
    Adobe Employee
    MihneaDAdobe Employee
    Adobe Employee
    July 1, 2016

    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
    andrew_r-GrfLbX
    Level 5
    July 1, 2016

    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.

    D
    Adobe Employee
    dwright-adobeAdobe Employee
    Adobe Employee
    July 1, 2016

    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
    andrew_r-GrfLbX
    Level 5
    July 2, 2016

    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);
    };

    D
    Adobe Employee
    dwright-adobeAdobe Employee
    Adobe Employee
    July 3, 2016

    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.

    Terms & ConditionsAccessibility statement

    Loading footer...