jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - code snippet changes as per the latest tracker

Browse source
This commit is contained in:
Shekar Siri 2022-03-04 17:55:24 +01:00
parent 35e7df94e0
commit 82ceecbef9
2 changed files with 14 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
View file

@ -17,9 +17,11 @@ const inputModeOptions = [
const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
<script>
var initOpts = { projectKey: "PROJECT_KEY", ingestPoint: "https://${window.location.hostname}/ingest"};
var startOpts = { userID: "" };
(function(A,s,a,y,e,r){
r=window.OpenReplay=[s,r,e,[y-1]];
s=document.createElement('script');s.src=a;s.async=!A;
r=window.OpenReplay=[e,r,y,[s-1, e]];
s=document.createElement('script');s.src=A;s.async=!a;
document.getElementsByTagName('head')[0].appendChild(s);
r.start=function(v){r.push([0])};
r.stop=function(v){r.push([1])};
@ -30,8 +32,7 @@ const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
r.issue=function(k,p){r.push([6,k,p])};
r.isActive=function(){return false};
r.getSessionToken=function(){};
r.i="https://${window.location.hostname}/ingest";
})(0, "PROJECT_KEY", "//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",1,XXX);
})("//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",XXX,0,initOpts,startOpts);
</script>`;

25
frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
View file

@ -1,12 +1,12 @@
import React, { useState } from 'react'
import { connect } from 'react-redux';
import { editGDPR, saveGDPR } from 'Duck/site';
import { Controlled as CodeMirror } from 'react-codemirror2';
import copy from 'copy-to-clipboard';
import { Select, Checkbox } from 'UI';
import GDPR from 'Types/site/gdpr';
import cn from 'classnames'
import styles from './projectCodeSnippet.css'
import Highlight from 'react-highlight'
const inputModeOptions = [
{ text: 'Record all inputs', value: 'plain' },
@ -16,9 +16,11 @@ const inputModeOptions = [
const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
<script>
var initOpts = { projectKey: "PROJECT_KEY", ingestPoint: "https://${window.location.hostname}/ingest"};
var startOpts = { userID: "" };
(function(A,s,a,y,e,r){
r=window.OpenReplay=[s,r,e,[y-1]];
s=document.createElement('script');s.src=a;s.async=!A;
r=window.OpenReplay=[e,r,y,[s-1, e]];
s=document.createElement('script');s.src=A;s.async=!a;
document.getElementsByTagName('head')[0].appendChild(s);
r.start=function(v){r.push([0])};
r.stop=function(v){r.push([1])};
@ -29,8 +31,7 @@ const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
r.issue=function(k,p){r.push([6,k,p])};
r.isActive=function(){return false};
r.getSessionToken=function(){};
r.i="https://${window.location.hostname}/ingest";
})(0, "PROJECT_KEY", "//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",1,XXX);
})("//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",XXX,0,initOpts,startOpts);
</script>`;
@ -132,17 +133,9 @@ const ProjectCodeSnippet = props => {
</div>
<div className={ styles.snippetsWrapper }>
<button className={ styles.codeCopy } onClick={ () => copyHandler(_snippet) }>{ copied ? 'copied' : 'copy' }</button>
<CodeMirror
value={ _snippet }
className={ styles.snippet }
options={{
height: 340,
mode: 'html',
readOnly: true,
showCursorWhenSelecting: false,
scroll: false
}}
/>
<Highlight className="html">
{_snippet}
</Highlight>
</div>
<div className="my-4">You can also setup OpenReplay using <a className="link" href="https://docs.openreplay.com/integrations/google-tag-manager" target="_blank">Google Tag Manager (GTM)</a>. </div>
</div>