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
  • 16877 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

    D
    Adobe Employee
    dwright-adobeAdobe Employee
    Adobe Employee
    April 4, 2016

    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
    Ridder_MAuthor
    Level 2
    April 4, 2016

    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  

    D
    Adobe Employee
    dwright-adobeAdobe Employee
    Adobe Employee
    April 4, 2016

    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
    Ridder_MAuthor
    Level 2
    April 6, 2016

    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

    D
    Adobe Employee
    dwright-adobeAdobe EmployeeAccepted solution
    Adobe Employee
    April 8, 2016

    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
    andrew_r-GrfLbX
    Level 5
    June 30, 2016

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

      Ridder_M
      Ridder_MAuthor
      Level 2
      June 30, 2016

      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
      andrew_r-GrfLbX
      Level 5
      June 30, 2016

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

        MihneaD
        Adobe Employee
        MihneaDAdobe Employee
        Adobe Employee
        June 30, 2016

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

          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.

          Show more replies
          Terms & ConditionsAccessibility statement

          Loading footer...