Skip to content

feat() Introduce single integration page #121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 15, 2019
Merged

feat() Introduce single integration page #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ff29f6
feat(): Introduce single integration page
bart-tonik Oct 15, 2019
24eff5f
feat(): Add default layout for all integrations
bart-tonik Oct 15, 2019
960b898
Merge branch 'staging' into 39-integration-page
imklau Oct 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ defaults:
path: "connections/destinations"
values:
integration_type: destination
layout: integration
- scope:
path: "connections/sources/catalog"
values:
Expand Down
74 changes: 74 additions & 0 deletions src/_layouts/integration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
---
layout: default
---

<div class="docs">
<div class="stage">
<div class="docs__aside stage__aside">
{% include navbar/logo.html %}

{% include menu/menu.html %}
</div>

<main class="docs__body stage__body">
<div>
<div class="search">
{% include navbar/search.html placeholder="Search documentation, ex. protocolos..." %}
</div>

{% include navbar/navbar-mobile.html %}
</div>


<div class="stage__content">
<article class="integration page">
{% include components/breadcrumbs.html %}

<div class="integration-header">
{%- if page.mark -%}
<div class="integration-header__icon">
<img src="{{ page.mark }}" alt="" class="image">
</div>
{%- endif -%}
<div class="flex__column">
{%- if page.title -%}
<h1 id="{{ page.title | downcase }}" class="page__heading">
{{ page.title }}
</h1>
{%- endif -%}
{%- if page.excerpt -%}
<div class="integration-header__content">
{{ page.excerpt | markdownify }}
</div>
{%- endif -%}
</div>
</div>

<div class="integration__body markdown">
{{ content }}
</div>
</article>
</div>
</main>

<div class="docs__sidebar stage__sidebar">
{% include navbar/nav.html %}

<div class="sidebar sidebar--sticky">
{%- unless page.hide_toc -%}
<div data-anchors-indicator data-active-class="menu-side__item--active">
{% include sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %}
</div>
{%- endunless -%}

{% if page.feedback != false %}
{% include sidebar/feedback.html %}
{% endif %}
</div>
</div>
</div>

<footer>
{% include components/footer.html %}
</footer>
</div>
19 changes: 19 additions & 0 deletions src/_sass/components/_integration-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.integration-header {
@include breakpoint(large up) {
display: flex;
}

&__icon {
float: left;
margin-right: 20px;
width: 141px;
height: 141px;
background-color: color(gray-light);
border-radius: 8px;
padding: 25px;
}

&__content {
margin-top: 5px;
}
}
26 changes: 26 additions & 0 deletions src/_sass/pages/_integration.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.integration {
display: block;

& > * + * {
margin-top: 33px;
}

&__body {
margin-top: 70px;

& > h2 {
margin-top: 70px;
position: relative;

&::after {
height: 1px;
width: 100%;
position: absolute;
top: -35px;
left: 0;
background-color: rgba(color(secondary), 0.16);
content: "";
}
}
}
}
2 changes: 2 additions & 0 deletions src/_sass/segment.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
@import "components/faq";
@import "components/avatar";
@import "components/related-list";
@import "components/integration-header";
@import "components/code-example";

// Pages
Expand All @@ -92,6 +93,7 @@
@import "pages/destinations";
@import "pages/home";
@import "pages/page-404";
@import "pages/integration";

// Vendors
// =================================================
Expand Down
82 changes: 45 additions & 37 deletions src/connections/destinations/catalog/optimizely-web/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
---
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess you forgot the layout variable in the front matter. It uses default right now and that's why the integration header isn't visible on the page. But the question is - why is this working on your localhost? 🤔 @bartlomiej-krakowski

title: Optimizely Web
mark: https://cdn.filepicker.io/api/file/8nygQ8DuSbWK01VIjZE5
excerpt: Segment makes it easy to send your data to [Optimizely Web](#) (and lots of other destinations). Once you've tracked your data through our open source [libraries](#) we'll translate and route your data to Optimizely Web in the format they understand. [Learn more](#) about how to use Optimizely Web with Segment.
---
## Getting Started

Expand Down Expand Up @@ -37,18 +39,18 @@ Segment provides specific implementation details for each Optimizely product in

### Getting Started

1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).
2. Go to your project’s home page in your Optimizely dashboard, then navigate to Settings -> Implementation and select the snippet version you’d like to include on your Web page.
3. In your Optimizely dashboard, select "Use Both Optimizely X and Optimizely Classic" under "Snippet Configuration."
4. In your Optimizely dashboard, copy the snippet provided at the bottom of the page. The snippet looks something like this:
{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*)' %}
{% include components/list-steps.html number="2" content="Go to your project’s home page in your Optimizely dashboard, then navigate to Settings -> Implementation and select the snippet version you’d like to include on your Web page." %}
{% include components/list-steps.html number="3" content='In your Optimizely dashboard, select "Use Both Optimizely X and Optimizely Classic" under "Snippet Configuration."' %}
{% include components/list-steps.html number="4" content="In your Optimizely dashboard, copy the snippet provided at the bottom of the page. The snippet looks something like this:" %}

```javascript
```html
<script src="//cdn.optimizely.com/js/#########.js"></script>
```

5. Include the snippet immediately after the opening `<head>` tag on every page where you’d like to include Optimizely’s JavaScript.
6. Now, paste your Segment snippet below the Optimizely snippet on every page where you’d like to include Segment’s JavaScript.
7. Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`.
{% include components/list-steps.html number="5" content="Include the snippet immediately after the opening `<head>` tag on every page where you’d like to include Optimizely’s JavaScript." %}
{% include components/list-steps.html number="6" content="Now, paste your Segment snippet below the Optimizely snippet on every page where you’d like to include Segment’s JavaScript." %}
{% include components/list-steps.html number="7" content="Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`." %}

### Track

Expand Down Expand Up @@ -161,24 +163,26 @@ If you run multiple experiments during a user session, since `traits` are cached

## Optimizely Classic Android

**NOTE: Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic.**
{% capture noteAndroid %}
Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic.
{% endcapture %}
{% include components/note.html content=noteAndroid %}

For Segment’s Optimizely Full Stack Android destination, see Segment's [Optimizely Full Stack](./../optimizely-full-stack/index.md) documentation.

### Getting Started
1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).
2. Go to your project’s home page in your Optimizely dashboard and retrieve your `projectId` - you’ll need this to instantiate Optimizely.
3. Include the desired version of the Optimizely Classic Android SDK as a dependency in your Android app.
4. Instantiate Optimizely - you’ll use this instance to invoke methods from Optimizely’s decision API such as `activate` and `isFeatureEnabled`.
5. Instantiate Segment’s global Analytics object with an Optimizely factory registered:
{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %}
{% include components/list-steps.html number="2" content="Go to your project’s home page in your Optimizely dashboard and retrieve your `projectId` - you’ll need this to instantiate Optimizely." %}
{% include components/list-steps.html number="3" content="Include the desired version of the Optimizely Classic Android SDK as a dependency in your Android app." %}
{% include components/list-steps.html number="4" content="Instantiate Optimizely - you’ll use this instance to invoke methods from Optimizely’s decision API such as `activate` and `isFeatureEnabled`." %}
{% include components/list-steps.html number="5" content="Instantiate Segment’s global Analytics object with an Optimizely factory registered:" %}

```java
analytics.use(OptimizelyIntegration.createFactory(context, /* your Optimizely projectId */));
```

Since Optimizely needs to be initialized as early as possible, you need to supply your Optimizely `projectId` when you initialize the factory registered with the analytics client. Once registered, Segment maps `track` and `identify` events to Optimizely methods.

7. Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`.
{% include components/list-steps.html number="6" content="Since Optimizely needs to be initialized as early as possible, you need to supply your Optimizely `projectId` when you initialize the factory registered with the analytics client. Once registered, Segment maps `track` and `identify` events to Optimizely methods." %}
{% include components/list-steps.html number="7" content="Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`." %}

### Track

Expand Down Expand Up @@ -208,24 +212,28 @@ Upon an Optimizely experiment activation, Segment’s Optimizely Classic<>Androi

## Optimizely Classic iOS

**NOTE: Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic.**
{% capture noteIOS %}
Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic.
{% endcapture %}
{% include components/note.html content=noteIOS %}

For Segment’s Optimizely Full Stack iOS destination, see Segment's [Optimizely Full Stack documentation](./../optimizelyx/index.md).

### Getting Started
1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).
2. Go to your project’s home page in your Optimizely dashboard and retrieve your `projectId` - you’ll need this to instantiate Optimizely.
3. Include the desired version of the Optimizely 1.x iOS SDK as a dependency in your iOS app.
4. Instantiate Optimizely - you’ll use this instance to invoke methods from Optimizely’s decision API such as `activate` and `isFeatureEnabled`.
5. Instantiate Segment’s global Analytics object with an Optimizely factory registered:
{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %}
{% include components/list-steps.html number="2" content="Go to your project’s home page in your Optimizely dashboard and retrieve your `projectId` - you’ll need this to instantiate Optimizely." %}
{% include components/list-steps.html number="3" content="Include the desired version of the Optimizely 1.x iOS SDK as a dependency in your iOS app." %}
{% include components/list-steps.html number="4" content="Instantiate Optimizely - you’ll use this instance to invoke methods from Optimizely’s decision API such as `activate` and `isFeatureEnabled`." %}
{% include components/list-steps.html number="5" content="Instantiate Segment’s global Analytics object with an Optimizely factory registered:" %}

```objc
[config use:[SEGOptimizelyIntegrationFactory instanceWithToken: /* your Optimizely project id /* launchOptions:launchOptions]];
```

Since Optimizely needs to be initialized as early as possible, you need to supply the Optimizely `projectId` when you initialize the factory registered with the analytics client. Once registered, Segment maps `track` and `identify` to Optimizely.

6. Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`.
{% include components/list-steps.html number="6" content="Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`." %}


### Track

Expand Down Expand Up @@ -259,13 +267,13 @@ Upon an Optimizely experiment activation, Segment’s Optimizely Classic<>iOS SD

### Getting Started

1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).
2. Go to your project’s home page in your Optimizely dashboard, then navigate to Settings -> Implementation and select the snippet version you’d like to include on your Web page.
3. In your Optimizely dashboard, select "Use only Optimizely X" under "Snippet Configuration."
4. In your Optimizely dashboard, copy the snippet provided at the bottom of the page.
5. Include the snippet immediately after the opening `<head>` tag on every page where you’d like to include Optimizely’s JavaScript.
6. Now, paste your Segment snippet below the Optimizely snippet on every page where you’d like to include Segment’s JavaScript.
7. Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`.
{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %}
{% include components/list-steps.html number="2" content="Go to your project’s home page in your Optimizely dashboard, then navigate to Settings -> Implementation and select the snippet version you’d like to include on your Web page." %}
{% include components/list-steps.html number="3" content='In your Optimizely dashboard, select "Use only Optimizely X" under "Snippet Configuration."' %}
{% include components/list-steps.html number="4" content="In your Optimizely dashboard, copy the snippet provided at the bottom of the page." %}
{% include components/list-steps.html number="5" content="Include the snippet immediately after the opening `<head>` tag on every page where you’d like to include Optimizely’s JavaScript." %}
{% include components/list-steps.html number="6" content="Now, paste your Segment snippet below the Optimizely snippet on every page where you’d like to include Segment’s JavaScript." %}
{% include components/list-steps.html number="7" content="Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`." %}

### Track

Expand Down Expand Up @@ -359,12 +367,12 @@ If you’re sending your experiments to Google Analytics in the form of `track`

### Getting Started

1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).
2. Require Optimizely’s `@optimizely/optimizely-sdk` on your site and create an `optimizelyClientInstance`.
3. The instance must be named `optmizelyClientInstance`.
4. Attach the `optimizelyClientInstance` to the `window` so Segment recognizes it.
5. Now, paste your Segment snippet below the Optimizely implementation on every page where you’d like to include Segment’s JavaScript. Or, if you’ve implemented Optimizely in a separate file, ensure Segment loads only after Optimizely has been initialized.
6. Finally, remember to define any `metrics` and `attributes` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`.
{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %}
{% include components/list-steps.html number="2" content="Require Optimizely’s `@optimizely/optimizely-sdk` on your site and create an `optimizelyClientInstance`." %}
{% include components/list-steps.html number="3" content="The instance must be named `optmizelyClientInstance`." %}
{% include components/list-steps.html number="4" content="Attach the `optimizelyClientInstance` to the `window` so Segment recognizes it." %}
{% include components/list-steps.html number="5" content="Now, paste your Segment snippet below the Optimizely implementation on every page where you’d like to include Segment’s JavaScript. Or, if you’ve implemented Optimizely in a separate file, ensure Segment loads only after Optimizely has been initialized." %}
{% include components/list-steps.html number="46" content="Finally, remember to define any `metrics` and `attributes` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`." %}

### Track

Expand Down