0

I know that you can have different themes for different parts of the site, assigning specific URLs to different themes by using hook_custom_theme() or the themekey module - I've used both solutions to do this at one time or another.

However, is there a way to modify/update what theme is being used on the current page by using Javascript?

I'm asking because I want to A/B test an upcoming UI fix. In my test, 50% of visitors in the control group would see "old pages using theme A" (without fix) and the other 50% would see "new pages with theme B" (with fix). Then I can see whether the fix improves performance/conversion and by how much.

The thing is the testing tool I use needs to have a way to change the theme for that latter group only. That tool (Optimizely) doesn't have access to the PHP hooks and functions, but it can alter the on-page JS code for the control/treatment groups.

Any advice would be much appreciated. If this is a bit confusing, I can clarify any questions ...

Improve this question

1 Answer 1

Reset to default
1

You couldn't select a Drupal theme through JS, unless you reloaded the entire page using JS after the initial load.

The better way to do this would be to use hook_custom_theme() to set the theme. Since you need to track the theme with Optimizely, you can send a JS variable from PHP and then pass that to Optimizely in order to track which theme is being viewed.

You could do this in hook_custom_theme() to have 50% of the users use one theme, 50% use the other:

function hook_custom_theme() {
  $theme = variable_get('switch_custom_theme', 'theme_1');
  $new_theme = $theme == 'theme_1' ? 'theme_2' : 'theme_1';
  variable_set('switch_custom_theme', $new_theme);
  return $new_theme;
}

Then you can get the theme in JS at Drupal.settings.ajaxPageState.theme (Drupal 7). I can't help you with the Optimizely side of things as I don't use it, you'd have to look at their documentation.

Improve this answer
4
  • but basically I need Optimizely to change the theme on the fly (assign new theme for 50% of the test audience only). as opposed to Drupal somehow assigning certain visitors to one of the two audiences and passing that info to Optimizely. Again maybe this is confusing, but the basic logic would be something like: IF optimizely variation = #somenumber THEN use theme A. ELSEIF optimizely variation = #anothernumber THEN use theme B. can we do that with Drupal somehow??
    – dubesor
    Commented Feb 16, 2017 at 0:59
  • JS is executed after the HTML has been sent to the browser. As optimizely is run in the browser, it cannot tell the server which theme to load. The only way it could do that would be to load the default theme first, then for X number of users, re-request the page and load it with the new theme. This would create over double the page load time for such users, which would screw up your metrics. So the basic answer is that no, it can't be done on the fly through JS. That's why I suggested the above method.
    – Jaypan
    Commented Feb 16, 2017 at 1:07
  • that does make more sense of course, but i just don't get how the randomization / AB test functionality would happen with hook_custom_theme() - i.e. how will Drupal assign exactly 50% of visitors randomly to one theme and 50% to another, and then pass that info to Optimizely to track the results. can you think of a scenario for that?
    – dubesor
    Commented Feb 16, 2017 at 1:12
  • I updated my post to show you the Drupal side of things.
    – Jaypan
    Commented Feb 16, 2017 at 1:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.