I'm testing Optimizely and created an implementation in my reactjs project. The optimizely script is loaded only when required (lazyLoad), so for that reason, when creating a new experiment in the Dashboard I get the "snippet not present in the page" error, which can be ignored.
When running the experiment through the app, I can access the active variant, etc. The log doesn't show or display any errors.
The current implementation or test is happening on our private server, not sure if it's related to the issue; so unless you're connected to the VPN you're not able to see the page.
Currently, there's only been me who have to access it, but I should see some traffic in the report, but there's been 0 so far.
There aren't any errors in the log
4678891099.js:212 Optimizely / Main / Started, revision 99 [time 0 +0]
4678891099.js:212 Optimizely / Query / Blocked request to load unsafe script: null [time 9 +9]
4678891099.js:212 Optimizely / Segmenter / Loading segments cookie. [time 13 +4]
4678891099.js:212 Optimizely / Segmenter / Segments cookie contains segment id: 4680143815 [time 13 +0]
4678891099.js:212 Optimizely / Segmenter / Segments cookie contains segment id: 4650727160 [time 13 +0]
4678891099.js:212 Optimizely / Segmenter / Segments cookie contains segment id: 4679173736 [time 13 +0]
4678891099.js:212 Optimizely / Activator / Triaging 3 segments. [time 13 +0]
4678891099.js:212 Optimizely / Condition / Testing segment 4680143815 [time 14 +1]
4678891099.js:212 Optimizely / Activator / Passed conditions for segment 4680143815 [time 14 +0]
4678891099.js:212 Optimizely / Condition / Testing segment 4650727160 [time 14 +0]
4678891099.js:212 Optimizely / Activator / Passed conditions for segment 4650727160 [time 14 +0]
4678891099.js:212 Optimizely / Condition / Testing segment 4679173736 [time 14 +0]
4678891099.js:212 Optimizely / Activator / Passed conditions for segment 4679173736 [time 14 +0]
4678891099.js:212 Optimizely / Segmenter / Evaluating Segment 4680143815 [time 14 +0]
4678891099.js:212 Optimizely / Segmenter / Evaluating Segment 4650727160 [time 14 +0]
4678891099.js:212 Optimizely / Segmenter / Evaluating Segment 4679173736 [time 14 +0]
4678891099.js:212 Optimizely / Integrator / Loading third-party segments. [time 18 +4]
4678891099.js:212 Optimizely / Visitor / Initializing [time 18 +0]
4678891099.js:212 Optimizely / Visitor / Found segment 4680143815 [time 19 +1]
4678891099.js:212 Optimizely / Visitor / Found segment 4650727160 [time 19 +0]
4678891099.js:212 Optimizely / Visitor / Found segment 4679173736 [time 19 +0]
4678891099.js:212 Optimizely / Info / Is Classic Optimizely enabled: true [time 20 +1]
4678891099.js:212 Optimizely / Info / Diagnostic enabled: false [time 20 +0]
4678891099.js:212 Optimizely / Info / Force variation enabled: false [time 20 +0]
4678891099.js:212 Optimizely / Info / Browser type: gc [time 20 +0]
4678891099.js:212 Optimizely / Info / Browser version: 61.0.3163.100 [time 20 +0]
4678891099.js:212 Optimizely / Info / Mobile browser type: android [time 20 +0]
4678891099.js:212 Optimizely / Info / New vs returning: returning [time 20 +0]
4678891099.js:212 Optimizely / Info / Source type: null [time 21 +1]
4678891099.js:212 Optimizely / Info / User ID: oeu1507206204323r0.4361859226305451 [time 22 +1]
4678891099.js:212 Optimizely / Condition / Testing experiment 8931711070 [time 22 +0]
4678891099.js:212 Optimizely / Condition / Testing URLs for experiment 8931711070 [time 22 +0]
4678891099.js:212 Optimizely / Condition / Failed to match any URL for experiment 8931711070 [time 24 +2]
4678891099.js:212 Optimizely / Condition / Testing experiment 8785608124 [time 24 +0]
4678891099.js:212 Optimizely / Condition / Testing URLs for experiment 8785608124 [time 24 +0]
4678891099.js:212 Optimizely / Distributor / Going to distribute experiment "Question variation for "Is investing for you?"" (8785608124) [time 24 +0]
4678891099.js:212 Optimizely / Distributor / Not distributing experiment 8785608124 (already in plan) [time 24 +0]
4678891099.js:212 Optimizely / Tracker / Queued tracking event 'https://foobarbeta.xyz/msl-1353-optimizely-screener-q2/risk/suitability' [time 29 +5]
4678891099.js:212 Optimizely / Tracker / Making a log request. [time 32 +3]
4678891099.js:212 Optimizely / Evaluator / 0 times waited [time 36 +4]
4678891099.js:212 Optimizely / Evaluator / 0 total times waited [time 36 +0]
4678891099.js:212 Optimizely / API / Finalizing API. [time 36 +0]
4678891099.js:212 Optimizely / Main / End of main [time 38 +2]
4678891099.js:212 Optimizely / API / Error for unknown function "page" [time 42 +4]
4678891099.js:212 Optimizely / Tracker / Removed a pending log event from the pending events cookie. [time 393 +351]
4678891099.js:212 Optimizely / Activator / Timeout: will not act on future async info. [time 2041 +1648]
4678891099.js:212 Optimizely / API / Called function "log" [time 3235 +1194]
you can see the active variant etc
the log result when the event is triggered
and the report
You can also see the customEvent, or goal below:
The react js component:
import React, { PropTypes } from 'react'
class OptimizelyExperiment extends React.Component {
constructor (props) {
super(props)
window.optimizely = window.optimizely || []
this.onReadyRecallMs = 10
this.defaultState = {
variantName: null,
result: null,
}
this.state = Object.assign({}, this.defaultState)
this.mapVariantToState = this.mapVariantToState.bind(this)
}
componentWillMount () {
if (!this.isReady()) {
this.insertScript()
this.observeReady(this.mapVariantToState)
}
}
componentDidMount () {
if (this.isReady()) {
this.mapVariantToState()
}
}
componentDidUpdate (prevProps, prevState) {
if (this.isReady() && prevState.variantName !== this.state.variantName) {
this.setResult()
}
}
observeReady (cb) {
const { allExperiments } = window.optimizely
if (allExperiments && typeof allExperiments[this.props.experimentId] !== 'undefined') {
this.triggerPageActivation()
this.props.customEvents.forEach(({selector, eventType, eventName}) =>
this.attachEventHandler(selector, eventType, eventName))
if (typeof cb === 'function') cb()
} else {
const t = setTimeout(() => {
clearTimeout(t)
this.observeReady(cb)
}, this.onReadyRecallMs)
}
}
mapVariantToState () {
const { activeExperiments, variationIdsMap, allVariations } = window.optimizely
activeExperiments.forEach(experimentId => {
const variationId = variationIdsMap[experimentId][0] // simple AB test, not multiple
const { name } = allVariations[variationId]
this.setState({ variantName: name })
})
}
insertScript () {
const { projectId } = this.props
const protocol = `${document.location.protocol}//`
const scriptTag = document.createElement('script')
scriptTag.type = 'text/javascript'
scriptTag.async = true
scriptTag.src = `${protocol}cdn.optimizely.com/js/${projectId}.js`
document.getElementsByTagName('head')[0].appendChild(scriptTag)
}
runExperiment () {
const { variantName } = this.state
const { experimentsMap } = this.props
let result = experimentsMap[variantName] || false
if (typeof result === 'function') {
result = result()
}
return result
}
isReady () {
return typeof window.optimizely === 'object' &&
typeof window.optimizely.data === 'object' &&
typeof window.optimizely.allExperiments === 'object'
}
setResult () {
this.setState({
result: this.runExperiment(),
})
}
triggerPageActivation () {
window.optimizely.push({
type: 'page',
pageName: this.props.pageName,
})
}
attachEventHandler (selector, eventType, eventName) {
const target = document.querySelector(selector)
const handler = () => {
window.optimizely.push({
type: 'event',
eventName: eventName,
})
target.removeEventListener(eventType, handler)
}
target.addEventListener(eventType, handler)
}
render () {
return this.state.result
}
}
OptimizelyExperiment.propTypes = {
projectId: PropTypes.string.isRequired,
experimentId: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
experimentsMap: PropTypes.object.isRequired,
pageName: PropTypes.string,
customEvents: PropTypes.array,
}
export default OptimizelyExperiment
Now, I've decided to change the URL Target (to force failure) and compare with the previous result (that DOES NOT have the failure in the console log). Which results in:
Optimizely / Condition / Failed to match any URL for experiment 8785608124 [time 15 +0]
So, unless the issue is related to the VPN or the reporter takes long hours to get any sort of data, I don't know where the problem is.
