https://github.com/reggi/klaviyo-forms

Write forms that directly create events / track users in Klaviyo.
https://github.com/reggi/klaviyo-forms

Last synced: about 1 month ago
JSON representation

Write forms that directly create events / track users in Klaviyo.

• Host: GitHub
• URL: https://github.com/reggi/klaviyo-forms
• Owner: reggi
• Created: 2015-03-19T17:06:25.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-03-19T17:07:30.000Z (over 9 years ago)
• Last Synced: 2024-10-05T10:45:43.321Z (about 2 months ago)
• Language: JavaScript
• Size: 117 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Klaviyo Forms

## How to use this repo?

```bash

npm install klaviyo-forms --save

```

```javascript

var klaviyoSubmitForm = require("klaviyo-forms")

var $klaviyoForms = $('[data-holstee-klaviyo]')

$klaviyoForms.on("submit", klaviyoSubmitForm())

$klaviyoForms.on("submitted", function(e, request, data){

  if(e) console.log(e)

  request.then(function(response){

    console.log("logging")

    console.log(response)

    console.log(data)

  });

})

```

Then you can construct your Klaviyo forms in full HTML.

```html

  

  

  

  

  

  

```

## The way things are currently

Klaviyo recommends in their [API documentation](https://www.klaviyo.com/docs/getting-started) to use klaviyo like this:

```html

  var _learnq = _learnq || [];

  _learnq.push(['account', 'YOURTOKEN']);

  _learnq.push(['identify', {

    // Change the line below to dynamically print the user's email.

    '$email' : '[email protected]'

  }]);

  (function () {

  var b = document.createElement('script'); b.type = 'text/javascript'; b.async = true;

  b.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'a.klaviyo.com/media/js/analytics/analytics.js';

  var a = document.getElementsByTagName('script')[0]; a.parentNode.insertBefore(b, a);

  })();

```

This does a couple of really antiquated things.

1. It uses `script` tags...

2. It attaches the Klaviyo Analytics file to the DOM

3. It allows you to identify a use based on an email address

What it doesn't do is get that email address from the customer.

What I'm currently working with is a monstrosity that I created [here](https://gist.github.com/reggi/561d96cfdb6a076fb330) this is my existing Klaviyo file, there's a couple of really antiquated things here as well.

1. It uses AMD (Built for RequireJs, now using webpack)

4. It selects individual forms, which are the heart of any Klaviyo event and does the same repetitive selecting every time I want to create a Klaviyo form, [I wized up toward the end](https://gist.github.com/reggi/561d96cfdb6a076fb330#file-existing-klaviyo-js-L220-L243), but it's still not good enough!